Vue-Router 路由重复点击时报错 Uncaught (in promise) NavigationDuplicated:Avoided redundant navigation to curr

前言

总结一下，在项目中遇到的一个小问题，使用 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。