vue 路由嵌套高亮问题

minjh 2018-05-17 原文

vue 路由嵌套高亮问题

正常路由嵌套是没有问题的，但是如果你已经在当前主路由页面了，然后再次点击主路由就会出现页面数据空白的情况

看代码：

//主路由通过v-for循环出来
<div class="list-group">
    <a href="javascript:;" v-on:click="doNothing" class="list-group-item" v-if="getPages.length != 0">数据统计</a>
    <router-link v-for="page in getPages" class="list-group-item" :to="page.pageUrl">{{page.pageName}}</router-link>
</div>

//次路由通过URL拼接的方式导航到子路由页面
<div class="panel-body tabs-wrap">
     <!--navtabbar begin-->
     <ul class="nav nav-tabs" v-if="isTencentPerson()">
     　　　<router-link :to="{ name: 'statistics1',params:{showPanel:false} }" tag="li" role="presentation"><a href="javascript:;">统计1</a></router-link>
　　　　　　<router-link :to="{ name: 'statistics2' ,params:{showPanel:false}}" tag="li" role="presentation"><a href="javascript:;">统计2</a></router-link> 
　　　　　　<router-link :to="{ name: 'statistics3' ,params:{showPanel:false}}" tag="li" role="presentation"><a href="javascript:;">统计3</a></router-link> 
　　　</ul> 
　　 <!--navtabbar end--> 
　　 <!--内容 begin-->
　　 <router-view></router-view>

</div>

子路由JS：

exprot default{　　
　　　　  mounted() {
            this.routerHop();
        },
        updated() {
            //当前页再次点击主路由时重新判断跳转
            var url = this.$route.path;
            if (url === "/statistics/dataStatistics") {
                this.routerHop();
            }
        },
        methods: {
            //权限判断
            isPerson() {
                let user = this.$store.state.user.userInfo;
                if (user.userType == 1) {
                    return true
                }
                return false;
            },
            routerHop(){
                // 客户账号登录只显示错误统计分析页面
                if(this.isPerson() === false){
                    return router.push({name: 'statistics1', params: {showPanel: false}});
                }
                router.push({name: 'statistics3', params: {showPanel: false}}); },
　　　　 　　}
 　　　}
}