触发情况
使用$ router.push
更改“页面”。如果使用同一页面,则vue-router
会引发错误。
1 | Error: Uncaught (in promise) NavigationDuplicated {_name: "NavigationDuplicated"...} |
重现
演示地址:https://codesandbox.io/s/vue-template-i2d63
寻求原因
经过多方查找&实践,发现是vue-router的版本问题引起的。
vue-router的更新日志显示 v3.1.0 版本的路由跳转改用了 promise 的方式,针对于路由跳转相同的地址,如果没有捕获到错误,控制台始终会出现上面的错误
下方是vue-router v3.1.0 的更改记录,感兴趣的可以看一下
解决方法
1. vue-router降级
vue-router降级,安装v3.0.x版本
演示地址:https://codesandbox.io/s/vue-template-qvrfr
2. 捕获错误
参考posva的回答 附加捕获错误到 push/replace方法
在 import Router from ‘vue-router’ 后引入如下代码
1 | const originalPush = Router.prototype.push |