如何解决 “NavigationDuplicated” 错误？三种常用方法详解。

报错信息:

Avoided redundant navigation to current location...

为什么会报这个错误?

这个错误的由来是Vue Router带有自身的导航处理机制，当你在代码中通过Vue Router进行路由跳转时，Vue Router会检查当前的导航动作是否与当前的路由相同，以避免由此产生的冗余导航。当检测到重复导航时，Vue Router会停止执行这个导航动作，并抛出"NavigationDuplicated"（重复导航）错误，以避免无限循环或其他问题的出现。

如何解决这个错误?

好的，以下是三种解决方案的详细说明：

1. 检测当前路由是否已经处于该路由

这个方法是在进行路由跳转前，先判断当前路由是否已经是目标路由，如果是就不执行路由跳转操作，而是跳转到其他不同的路由。

代码示例：

if (this.$route.path !== '/account/personal') {
  this.$router.push('/account/personal');
}

在这个代码段中，我们首先检查当前路由是否为"/account/personal"，如果不是，就执行导航操作。这将避免出现“NavigationDuplicated”的问题，因为如果已经处于该路由，就不会再次执行导航操作。

2. 使用前置守卫 beforeEach 避免执行重复导航

这个方案是使用Vue Router提供的 "beforeEach" 守卫，官方文档中可以看到这个守卫主要是用于路由权限控制，但是也可以用来判断重定向或避免重复导航。

代码示例：

router.beforeEach((to, from, next) => {
  if (to.path === from.path) {
    next(false);
  } else {
    next();
  }
});

在这个代码段中，我们检查目标路由是否与当前路由相同。如果相同，将会阻止导航并向下面的钩子(next)传递 false 参数。否则，将调用 next() 方法，继续进行导航。

3. 重写 Vue Router 的 push 方法

这个方法是重写Vue Router的push方法，在方法中判断导航是否是重复导航，避免执行多次相同的导航动作。

代码示例：

// 改写push方法防止报错

// 获取原型对象中的push函数

const originalPush = VueRouter.prototype.push;

// 修改原型对象中的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);
};