前言
总结一下,在项目中遇到的一个小问题,使用 Vue 构件的项目里,有时候会存在 重复点击路由 报错的问题,Uncaught (in promise) NavigationDuplicated:Avoided redundant navigation to current location
虽然这个报错并不影响程序的正常运行,但是依然让人感到很不爽,这段代码也差不多是我在构建项目时用的挺多的一段代码。
而且,应该也有很多萌新遇到过这个问题,但是不知道如何解决,所以在这边记录一下。
造成这个报错的原因,大多是说 因为 Vue-Router 版本的原因,但是我尝试更换了不同版本,但是依然没有得到缓解,还是这段代码好使!
解决方法
在 router/index.js 文件中添加一段代码即可:
JS
// 解决重复点击路由报错的BUG
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch((err) => err)
}
当然你也可以加在 mian.js 中,我更加习惯于添加在 router/index.js。