vue-router 重复点击报错
# 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)
}
1
2
3
4
5
2
3
4
5
当然你也可以添加在 main.js
中,我更习惯于添加在 router/index.js
。
上次更新: 2022/07/01, 17:34:19