NavigationDuplicated 产生原因和解决方法

 NavigationDuplicated 的产生原因

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

 

 或者

 

其原因在于Vue-router在3.1之后把$router.push()方法改为了Promise。所以假如没有回调函数，错误信息就会交给全局的路由错误处理，因此就会报上述的错误。

解决方案 

方案1：  降低vue-router版本

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

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

把这段代码放在引入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)
};

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

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

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