首页 > 编程知识 正文

NavigationDuplicated 产生原因和解决方法,内应力产生原因及解决方法

时间:2023-05-03 22:06:42 阅读:219580 作者:4781

     dpdlh的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) }

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

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。