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