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

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

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

解决方案

1.固定vue-router版本到3.0.7以下。

2.禁止全局路由错误处理打印，这个也是vue-router开发者给出的解决方案

import Router from 'vue-router'const originalPush = Router.prototype.push

Router.prototype.push = functionpush(location, onResolve, onReject){

  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)

  return originalPush.call(this, location).catch(err=> err)

}

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

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

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

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

原文链接参考：参考