当你的Vue项目在当前的路由下企图再次导航到当前路由时就会出现NavigationDuplicated的问题(通俗来讲就是多次进入了同一个path,比如说当前你在/user/user-list页面,这时候你通过点击按钮或其他的方式又进入了/user/user-list页面,那就会抛出下面的问题)
这个问题是vue-router3.0版本往上才出现的问题,目前的vue-router@3.1.1 版本官方已经修复了此问题。NavigationDuplicated 产生的时候会抛出一个promise,在3.0版本之前如果router.push没有设置callback,那么错误会被全局的 router 错误收集函数 handler所处理,但是现在push 和 replace会抛出promise,而这个promise如果没有被捕获的话,那就会被抛出到控制台,也就是handler不处理我们的promise了,这也是当时设计人员考虑不周出现的bug,我们也可以去vue-router的github上的issues板块上看到这个问题,目前NavigationDuplicated已经被关闭了。
知道了问题的产生原因那么解决方案其实已经显而易见了,以下是其中的两种解决方法:
1:这是最简单的方案只要更换一下vue-router版本就行,可以升级到3.1.1或者是降级到2.8,个人建议还是升级比较好。
2: 这一种其实只要自己在调用路由跳转函数的时候自己去捕捉处理一下promise就行了。
像这样 router.push('/location').catch(err => {})
或者直接把push在router原型上二次封装一下,
import Router from 'vue-router'
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
return originalPush.call(this, location).catch(err => err)
}
知其然,知其所以然。慢慢在探索的过程中,不知不觉你会变得更强。
————————————————
版权声明:本文为CSDN博主「河鲜森」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_34295211/article/details/102371714