Vue-router 报NavigationDuplicated的可能解决方案

时间 2019-11-12

标签 vue router navigationduplicated 可能解决方案繁體版

原文原文链接

出现这个问题，控制台会报[NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}]。其缘由在于Vue-router在3.1以后把$router.push()方法改成了Promise。因此假如没有回调函数，错误信息就会交给全局的路由错误处理，所以就会报上述的错误。vue

若是你仔细观察并复现了屡次错误你会发现，vue-router是先报了一个Uncaught (in promise)的错误(由于push没加回调)，而后再点击路由的时候才会触发NavigationDuplicated的错误(路由出现的错误，全局错误处理打印了出来)。git

解决方案

方案1

固定vue-router版本到3.0.7如下。这个方案没什么说的，就是简单粗暴，没有任何理由。可是你能确保之后不升级vue-router吗？github

方案2

禁止全局路由错误处理打印，这个也是vue-router开发者给出的解决方案：vue-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)
}

把这段代码放在引入vue-router以后就行，通常在main.js里，若是你的路由单独抽取出来了，那可能在其余的路由文件中。promise

方案3(高成本高收益)

vue-router的开发者也给出了解决方法，你须要为每一个router.push增长回调函数。函数

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

对于咱们来讲这个解决方案的成本可能很高，可是是值得的。在vue-router 3.1版本以前的push调用时不会返回任何信息，假如push以后路由出现了问题也不会有任何的错误信息。若是你使用方案1固定了vue-router的版本，那么之后的项目须要路由的回调时你根本无从下手。this

方案4

若是你使用了Element-UI，而且方案2没法解决你的问题。那么你只能用方案1来固定你的vue-router版本了。这是由于Element-UI的el-menu在重复点击路由的时候报的错误，并且这个错误是Element-UI内部的路由问题，你没法经过方案2和3去解决。只能选择暂时不升级Vue-router。prototype

好消息是Element-UI已经有了解决方案，预计在2.13.0版本会解决这个问题。参考Github上issue#17269。code

参考文章

No stacktrace on NavigationDuplicated error #2881router

[Bug Report] 升级vue-router至3.1之后版本，导航组件重复点击报错 NavigationDuplicated #17044

Menu: fix router NavigationDuplicated error when using vue-router@^3.1.0 #17269