这次给大家带来怎样实现vue路由嵌套高亮，实现vue路由嵌套高亮的注意事项有哪些，下面就是实战案例，一起来看一下。
看代码：
//主路由通过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: 'statistics1',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: 'statistics2' ,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: 'statistics3' ,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>
子路由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}}); },
}
}
}
因为已经在当前子路由页面，当再次点击主路由导航时，无法触发mounted钩子。通过updated这个钩子函数可以让再次找到对应子路由，从而解决再次点击主路由页面空白的bug。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样实现微信小程序的自定义多选事件
在不使用select的情况下vue怎么实现下拉框功能
以上就是怎样实现vue路由嵌套高亮的详细内容。