VUE相关

vue路由传参,使用props获取参数

2019-08-01  本文已影响0人  伴歌知行

在路由中定义props:
1、在path后添加 /:id ,则id参数存放在route.params中
2、articleTitle参数存放在route.query中

{
      path: '/article/:id',
      component: () => import( /* webpackChunkName: "article" */ "../pages/article"),
      props: (route) => ({
        id: route.params.itemId,
        articleTitle: route.query.draft
      })
}

跳转到article页面时:

this.$router.push({
       path: "/article/" + id,
       query: {
            articleTitle: "文章1"
       }
})

在article页面组件上接收参数:

props: {
   id: String,
   articleTitle: String
}
上一篇 下一篇

猜你喜欢

热点阅读