嵌套路由指的是在动态路由的基础上再加上附加的嵌套URL(即组件)。
<template>
<div>
<p>{{msg}}</p>
<router-link :to="profile">简介</router-link>
<router-link :to="stats">数据</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default{
name:'player',
data(){
return {
msg:{},
profile:'',
stats:''
}
},
mounted(){
this.msg=this.getPlayer(this.$route.params.uid);
this.profile='/player/'+this.$route.params.uid+'/profile';
this.stats='/player/'+this.$route.params.uid+'/stats';
},
beforeRouteUpdate(to,from,next){
this.msg=this.getPlayer(to.params.uid);
this.profile='/player/'+to.params.uid+'/profile';
this.stats='/player/'+to.params.uid+'/stats';
next();
},
methods:{
getPlayer(uid){
switch (uid) {
case '1':
return {id:1,name:'哈登'};
break;
case '2':
return {id:2,name:'姚明'};
break;
default:
return {id:-1};
// statements_def
break;
}
}
}
}
</script>