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

今天在做tabbar的时候，遇到一个问题，页面虽然能够成功跳转，但是控制台报了一个Uncaught (in promise)的错误，多次点击时报错[NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}]。查了资料，发现原因是在于Vue-router在3.1之后把$router.push()方法改为了Promise。所以假如没有回调函数，错误信息就会交给全局的路由错误处理，因此就会报上述的错误。

Uncaught (in promise)错误的原因是因为push没加回调，再点击路由的时候就会触发NavigationDuplicated的错误(路由出现的错误，全局错误处理打印了出来)。

总结了几种网上的解决方案：

方案1

将vue-router版本控制到3.0.7以下。

方案2

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

import VueRouter from 'vue-router'

const originalPush = VueRouter.prototype.push
VueRouter.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里，如果你的路由单独抽取出来了，那可能在其他的路由文件中。

如果你的改了push还是没有生效，可以考虑改replace方法

import VueRouter from 'vue-router'
const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch(err => err);
};

方案3(高成本高收益)

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

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

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

方案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。

作者：六层楼
链接：https://www.cnblogs.com/rever/p/11577322.html