嵌套路由

Posted 2021-01-13 m-yk

嵌套路由指的是在动态路由的基础上再加上附加的嵌套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>