vue路由切换时NavigationDuplicated报错的解决方法

vue路由切换时NavigationDuplicated报错的解决方法

在vue中使用this.$router.push()方法切换路由时，有时控制台会报NavigationDuplicated相关的错误，如下图所示：

原因：
在网上查询一番后，比较多的一种说法是，vue-router在3.1之后把$router.push()方法改为了Promise，因此在使用$router.push()时如果没有处理错误回调函数，错误就会被路由全局错误处理捕获。

解决方法：

1、将项目中vue-router依赖的版本降级为3.1以下；

2、针对于3.1以上的版本，根据网上提供的经验，下面是一种全局的更改方法，在引入vue-router文件中改写构造函数Router的push方法：

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

上述只是重写了Router的push方法，当项目中使用replace等方式，如果出现上述报错，也需要按照重写push的方式重写replace等方法。

个人认为上述方法其实治标不治本，只是让路由全局错误处理不在捕获显示该错误，其实该错误还是存在的。

参考文献：

[1] Vue-router 报NavigationDuplicated的可能解决方案
[2] NavigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”}
[3] 解决vue中的NavigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”}
[4]解决vue在控制台的 NavigationDuplicated 报错