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

前端之家收集整理的这篇文章主要介绍了vue 路由嵌套高亮问题的解决方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

代码

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

子路由JS:

跳转 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。

总结

以上所述是小编给大家介绍的vue 路由嵌套高亮问题的解决方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/32272.html

猜你在找的Vue相关文章