微客导航 » 文章资讯 » vue 路由嵌套高亮问题的解决方法

vue 路由嵌套高亮问题的解决方法

2023-09-12 17:14:05 178

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

看代码：

//主路由通过v-for循环出来

数据统计
{{page.pageName}}

//次路由通过URL拼接的方式导航到子路由页面

统计1 统计2 统计3

子路由JS：

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

因为已经在当前子路由页面，当再次点击主路由导航时，无法触发mounted钩子。通过updated这个钩子函数可以让再次找到对应子路由，从而解决再次点击主路由页面空白的bug。

总结

以上所述是小编给大家介绍的vue路由嵌套高亮问题的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

vue 路由嵌套高亮问题的解决方法

热门推荐

随机推荐