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

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

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

看代码：

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

数据统计

{{page.pageName}}

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

　　　统计1

　　　　　　统计2

　　　　　　统计3

子路由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}});

DQadzwNIrI }

router.push({name: 'statistics3', params: {showPanel: false}}); },

　　　　 　　}

　　　}

}

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

总结

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。