码迷,mamicode.com
首页 > 其他好文 > 详细

嵌套路由

时间:2018-10-16 15:58:56      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:case   state   基础上   url   export   bre   动态路由   div   nbsp   

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

 

嵌套路由

标签:case   state   基础上   url   export   bre   动态路由   div   nbsp   

原文地址:https://www.cnblogs.com/m-yk/p/9797896.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!