解决router重复push报错

一、报错情况

情况复现:使用router跳转时,router会有一个历史记录栈,当新的push元素和上一次最后push的元素一致,那么会报以下错误

vue-router.esm.js:1675 Uncaught (in promise) 
NavigationDuplicated {_name: 'NavigationDuplicated', name: 'NavigationDuplicated'}
name
: 
"NavigationDuplicated"
_name
: 
"NavigationDuplicated"
[[Prototype]]
: 
Error

在这里插入图片描述

二、解决

1、重写push方法

在router的index.js中重写push方法

// 重写push方法
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
	return originalPush.call(this, location).catch(err => err);
}

2、代码解释(来自讯飞星火AI)

这段代码是一个自定义路由跳转的示例。它通过重写Router.prototype.push方法来实现自定义的逻辑。下面是对代码中参数的解释:

location:表示要跳转到的目标位置,通常是一个字符串或对象,包含了目标路由的信息。
在自定义的Router.prototype.push方法中,首先将原始的Router.prototype.push方法保存在originalPush变量中。然后,使用Router.prototype.push方法来定义一个新的push方法,该方法接受一个location参数。

在新定义的push方法中,调用了原始的Router.prototype.push方法,并将location参数传递给它。这样可以执行实际的路由跳转操作。

接下来,使用catch方法捕获任何可能抛出的错误,并将其作为返回值返回。这样,如果在路由跳转过程中发生错误,可以处理该错误并进行相应的处理。

总之,这段代码的作用是重写了Router.prototype.push方法,以便在执行路由跳转时添加自定义逻辑,并捕获并处理可能出现的错误。

(内容由讯飞星火AI生成)

  • 11
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

it's all you

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值