How to implement nested highlighting of vue routes

This time I will bring you how to implement vueroutingnested highlighting, what are the things to note about implementing vue routing nested highlighting, the following is a practical case, let’s take a look together take a look.

Look at the code:

//主路由通过v-for循环出来
<p class="list-group">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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>
</p>
//次路由通过URL拼接的方式导航到子路由页面
<p class="panel-body tabs-wrap">
   <!--navtabbar begin-->
   <ul class="nav nav-tabs" v-if="isTencentPerson()">
   　　　<router-link :to="{ name: &#39;statistics1&#39;,params:{showPanel:false} }" tag="li" role="presentation"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >统计1</a></router-link>
　　　　　　<router-link :to="{ name: &#39;statistics2&#39; ,params:{showPanel:false}}" tag="li" role="presentation"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >统计2</a></router-link> 
　　　　　　<router-link :to="{ name: &#39;statistics3&#39; ,params:{showPanel:false}}" tag="li" role="presentation"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >统计3</a></router-link> 
　　　</ul> 
　　 <!--navtabbar end--> 
　　 <!--内容 begin-->
　　 <router-view></router-view>
</p>

Sub-routing 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}}); },
　　　　 　　}
 　　　}
}

Because you are already on the current sub-routing page, when you click the main route navigation again, the mounted hook cannot be triggered. Through the updated hook function, the corresponding sub-route can be found again, thereby solving the bug of clicking on the blank main route page again.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to implement a custom multi-select event in WeChat applet

When select is not used How to implement the drop-down box function under vue

The above is the detailed content of How to implement nested highlighting of vue routes. For more information, please follow other related articles on the PHP Chinese website!