路由传参 -vue

参数接收

param参数 => /: => 接收参数：this.$route.params.id

query参数 => ? => 接收参数：this.$route.query.id

还有一种 meta值

路由复用

场景：当从Product/1 跳转到 Product/2 时，原来的组件实例被复用，两个路由渲染的是用一个组件，这时组件的生命周期钩子不会被二次加载；

export default {

created() {

获取参数

}

这里的获取参数将不会改变，相对路由参数做出变化：

export default {

watch: {

'$router' (to ,from) {

//对路由变化做出响应

}

传递参数

由于query与params传参机制不一样，造成的差异，如果要隐藏参数用params，如果强制刷新不被清除用query

通过$router中name配置：

this.$router.push({

  name: 'ProductList',

  query:{

     CategoryID: CategoryID

  }

})

路由器配置name

问号?
this.$router.push({

    path: `/ProductList?CategoryID=${id}`

})
this.$router.push({
　　path: `/ProductList`,
　　query: {
　　　　CategoryID: CategoryID
　　}
})

<router-link v-for="item in CategoryList" v-if="item.Level === 1" :key="item.id" :to="`/ProductList?CategoryID=${item.id}`">

通过路由器配置：

export default new Router({

  routes: [

    {

      path: '/Product/:id',

      name: 'Product',

      component: Product

    }

  ]

})

1）

<router-link :to="`/Product/${item.ID}`" v-for="item in ProductList">{{ item.ProductName }}</router-link>

<router-link :to="`{name:'Product',params:${item.ID}}`" v-for="item in ProductList">{{ item.ProductName }}</router-link>

2）

this.$router.push({

　path: `/ProductList/${CategoryID}`

})

巴特西

路由传参 -vue

最新文章

热门文章