vue-router 重复点击报错

📖. 前言

总结一下，在项目中遇到的一个小问题，使用 Vue 构建的项目里，有时候会存在 重复点击路由 报错的问题，Uncaught (in promise) NavigationDuplicated:Avoided redundant navigation to current location。

虽然这个报错并不影响程序的正常运行，但是依然让人感到很不爽，这段代码也差不多是我在构建项目时用的挺多的一段代码。

而且诶，应该也有很多萌新遇到过这个问题，但是不知道如何解决，所以在这边记录一下。

造成这个报错的原因，大多是说，因为 Vue-Router 版本的问题，所以我尝试更换了不同版本，但是并没有得到解决，还是这段代码好使！

一. 解决方法

在 router/index.js 文件中添加一段代码即可：

// 解决重复点击路由报错的 Bug
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err)
}

当然你也可以添加在 main.js 中，我更习惯于添加在 router/index.js。