解决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: … { 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.push
						        Router.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.push
	Router.prototype.push = function push(location) {
	  return originalPush.call(this, location).catch(err => err)
	}
  • 6
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值