路由传参 -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}`
})