NavigationDuplicated 产生原因和解决方法

     当你的Vue项目在当前的路由下企图再次导航到当前路由时就会出现NavigationDuplicated的问题(通俗来讲就是多次进入了同一个path,比如说当前你在/user/user-list页面,这时候你通过点击按钮或其他的方式又进入了/user/user-list页面,那就会抛出下面的问题)

     这个问题是vue-router3.0版本往上才出现的问题,目前的vue-router@3.1.1 版本官方已经修复了此问题。NavigationDuplicated 产生的时候会抛出一个promise,在3.0版本之前如果router.push没有设置callback,那么错误会被全局的 router 错误收集函数 handler所处理,但是现在push 和 replace会抛出promise,而这个promise如果没有被捕获的话,那就会被抛出到控制台,也就是handler不处理我们的promise了,这也是当时设计人员考虑不周出现的bug,我们也可以去vue-router的github上的issues板块上看到这个问题,目前NavigationDuplicated已经被关闭了。

    知道了问题的产生原因那么解决方案其实已经显而易见了,以下是其中的两种解决方法:

          1:这是最简单的方案只要更换一下vue-router版本就行,可以升级到3.1.1或者是降级到2.8,个人建议还是升级比较好。

          2: 这一种其实只要自己在调用路由跳转函数的时候自己去捕捉处理一下promise就行了。 

          像这样      router.push('/location').catch(err => {})

           或者直接把push在router原型上二次封装一下,

     import Router from 'vue-router'

     const originalPush = Router.prototype.push
     Router.prototype.push = function push(location, onResolve, onReject) {
        if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
        return originalPush.call(this, location).catch(err => err)
     }

        知其然,知其所以然。慢慢在探索的过程中,不知不觉你会变得更强。

  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值