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

本文主要是介绍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。

这篇关于Vue-Router 路由重复点击时报错 Uncaught (in promise) NavigationDuplicated:Avoided redundant navigation to curr的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---