解决vue报错问题：重复点击导航栏按钮报vue-router.esm.js?fe87:2065 Uncaught (in promise) NavigationDuplicated: Avoided

本文主要是介绍解决vue报错问题：重复点击导航栏按钮报vue-router.esm.js?fe87:2065 Uncaught (in promise) NavigationDuplicated: Avoided，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

重复点击导航栏按钮报Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/recruit”.
这两天做项目的时候突然发现在多次点击导航栏按钮时会出现这样的报错，不影响使用，但是身为一名程序员是不允许出现这种情况的。。。
如图：
在这里插入图片描述
在网上百度的方案也挺多的
方案一：在重新下载依赖包时，安装的vue-router还是之前出错的那个版本删除node_modules 从新安装npm i vue-router@3.0 -S
方案二：在跳转时，判断是否跳转路由和当前路由是否一致，避免重复跳转产生问题
if (this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots { this.$ router.push({ path: item.url })
}

方案三：使用 catch 方法捕获 router.push 异常

this.$router.push(route).catch(err => {console.log('报错',err)}）

方案四：在 router 文件夹下里面的文件index.js里面找到如下位置

 Vue.use(Router)const router = new Router({routes})找到上面位置，在下面增加这段代码即可。const VueRouterPush = Router.prototype.pushRouter.prototype.push = function push (to) {return VueRouterPush.call(this, to).catch(err => err)}

参考链接：https://blog.csdn.net/qq_36437172/article/details/108269846
方案五：找到Vue.use(Router）进行配置下

		import Router from 'vue-router'const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)}