解决vue-router报NavigationDuplicated: Avoided redundant navigation to current location 的问题
2022/3/4 23:45:31
本文主要是介绍解决vue-router报NavigationDuplicated: Avoided redundant navigation to current location 的问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
场景:在 App.vue文件中通过watch全局监听本地中是否有 token,若没有,则跳转到登录页;若有,则return。
1 app.vue代码 2 3 watch: { 4 $route() { 5 if (!localStorage.getItem("token")) { 6 this.$router.push("/login"); 7 } else { 8 return; 9 } 10 } 11 }
虽然跳转到登录页了,但是控制台报错了,如下:
查阅相关资料,总结原因:watch监控执行了两次,导致了重复触发了同一个路由。
且在跳转前后两行分别打印了99 和 '-----',结果发现确实打印了两次:
对于报错,已找到了解决办法:
在route.js文件中写入以下代码即可:
1 const originalPush = Router.prototype.push 2 3 Router.prototype.push = function push(location) { 4 return originalPush.call(this, location).catch(err => err) 5 }
结果发现控制台中的报错消失了。
这篇关于解决vue-router报NavigationDuplicated: Avoided redundant navigation to current location 的问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南