解决Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location

当使用Vue-Router来进行页面导航时，有时会遇到“NavigationDuplicated: Avoided redundant navigation to current location”报错。这个错误提示很明确，表示重复导航到了当前的页面地址。

当使用Vue-Router来进行页面导航时，有时会遇到“NavigationDuplicated: Avoided redundant navigation to current location”报错。这个错误提示很明确，表示重复导航到了当前的页面地址。

这种错误通常是因为两次相同的路由导航发生在短时间内，例如用户快速点击同一个路由链接或使用了类似于Vue-Router的编程式导航进行了重复的路由跳转。

要解决这个问题，我们可以采取以下两种方案：

解决方案一：使用catch()处理错误

我们可以监听Vue-Router路由跳转的错误，在导航时使用.catch()方法捕获错误，并禁止重复跳转，例如：

// 在router.js中
const router = new VueRouter({
  // ...
});

// 在路由导航前加入判断
router.beforeEach((to, from, next) => {
  if (to.path === from.path) {
    next(false);  // 禁止重复跳转
  } else {
    next(); // 正常跳转
  }
});

// 捕获NavigationDuplicated错误
router.onError((err) => {
  if (err.name === 'NavigationDuplicated') {
    console.log('重复路由跳转');
  }
});

解决方案二：在Vue-Router中重写路由跳转方法

我们还可以通过Vue-Router提供的一个方法，来重写路由跳转方法，避免路由的重复跳转。具体实现如下：

import Vue from 'vue';
import Router from 'vue-router';

// 重写push方法
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => {
    if (err.name === 'NavigationDuplicated') {
      console.log('重复路由跳转');
    }
  });
};

Vue.use(Router);
const router = new Router({...})

上述代码中，我们通过重写Vue-Router原生的路由push()方法，来避免重复路由跳转。调用push()方法时，如果发生NavigationDuplicated错误，我们就通过catch()方法捕获并输出提示信息。

以上两种方案均可以有效解决Vue路由导航“NavigationDuplicated”报错的问题。