编程式路由重复跳转就会报错误:NavigationDuplicated: Avoided redundant navigation to current location

当使用  this.$router.push() 进行路由跳转的时候,当第一次使用路由跳转的时候是不会出现这个问题的,但是当你再一次跳转到这页面的时候且参数的数据也没有发生改变,就会报这个错误。

虽然这个报错没有影响到程序的正常运行,但是这个问题的话也是不难解决的。我这里就是主要提供了三种方案。

第一种方案:在路由跳转的里面加上一个成功的回调函数

  this.$router.push({},()=>{})

第二种方案:使用 catch 捕获错误的 promise

this.$router.push({}).catch(()=>{})

this.$router.push() 该放啥还是放啥,在后面多加一个成功的回调或者捕获失败的的回调就可以很好的解决这个问题了,但是第一种和第二种方案都是针对某一个路由跳转的,其他的路由跳转要是也想实现这个功能的话虽然说加上去就行了,但是会增加很多的代码量,所以就有了第三种方案。

第三种方案:重写原型链上的push方法

// 缓存原来的 push 方法
const originalPush = VueRouter.prototype.push
//指定新的push方法
VueRouter.prototype.push = function (location, onResolve, onReject) {
  
  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值