我们经常需要把某种模式匹配到的所有路由,全部映射到同个组件,那么我们可以在vue-router的路由路径中使用“动态路径参数”来达到这个效果
动态路径参数,以冒号开头
看个小示例
const router= new Router({
routes:[
{
path:'/user/:tip?/:userId?',
name:'User',
component:user
}
]
});
在user组件中:
<div class="user-list">
<router-link
v-for="item,index in dataList"
style="padding:10px 30px;"
key="index"
:to="{path:`/user/${item.tip}/${item.id}`" >{{item.userName}}</router-link>
</div>
所以此时,/user/vip/1 和/user/common/2都将映射相同的路由
一个“路径参数”使用冒号(:)标记,当匹配到一个路由时,参数值会被添加到this.$route.params,可以在每个组件内使用
注意:当使用路由参数时,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用更高效,不过这会有一个问题,就是组件的生命周期钩子不会再被调用
所以复用组件时,想要对路由参数的变化做出响应的话,可以使用watch $route对象($route)
例如像下面这样:
export default {
data(){
return {
dataList:data,
userInfo:{}
}
},
watch:{
$route(){
//路径发生变化,$route会重新赋值,监控了这个属性,会执行这个函数
this.getData()
}
},
created(){
//渲染组件的时候会调用一次这个生命周期的函数,
// 复用这个组件,这个函数不会再次被调用了
// 地址一旦发生变化,$route会重新生成一个路由信息对象
this.getData()
},
methods:{
getData(){
let id = this.$route.params.userId;
if(id){
this.userInfo = this.dataList.filter(item=>{
return item.id == id;
})[0]
}else{
this.userInfo = {}
}
}
}
}
官网中还提到一种方法是:使用 2.2 中引入的 beforeRouteUpdate
守卫
ok,上面我们提到的路由对象,$route,如果有不熟悉的,可以看$route