Vue.js路由重复导航报错求助：执行replace跳转触发异常

嗨，这个问题我之前在项目里也踩过坑！当你调用this.$router.replace({query: newQuery})时，如果新的query参数和当前路由的query完全一致，或者你只是重复导航到同一个路由地址，Vue Router就会抛出这个未捕获的Promise错误——毕竟它不想做无意义的重复导航操作。下面给你几个实用的解决方案：

方案一：跳转前先判断query是否有变化 #

最稳妥的方式是在执行跳转前，先对比新旧query的内容，只有当确实有变化时才调用replace：

// 封装一个判断query是否相同的函数
function isQueryEqual(currentQuery, newQuery) {
  const currentKeys = Object.keys(currentQuery);
  const newKeys = Object.keys(newQuery);
  
  // 先判断键的数量是否一致
  if (currentKeys.length !== newKeys.length) return false;
  
  // 再逐个对比键值对
  return currentKeys.every(key => currentQuery[key] === newQuery[key]);
}

// 使用示例
if (!isQueryEqual(this.$route.query, newQuery)) {
  this.$router.replace({ query: newQuery });
}

这样就能从根源上避免触发重复导航的情况。

方案二：捕获replace方法的Promise错误 #

因为这个错误本质是未被捕获的Promise拒绝，所以你可以直接在调用replace时加上catch来处理它，选择性忽略这个特定错误：

this.$router.replace({ query: newQuery })
  .catch(err => {
    // 只忽略重复导航的错误，其他错误正常抛出
    if (!err.message.includes('Avoided redundant navigation')) {
      console.error('路由跳转出错:', err);
    }
  });

这种方式简单直接，不需要额外的判断逻辑，适合不想写太多对比代码的场景。

方案三：全局配置忽略重复导航错误 #

如果你希望整个项目都不再看到这个错误提示，可以根据Vue Router的版本做全局配置：

Vue Router 3.x（Vue 2） #

创建Router实例时，添加suppressNavigationDuplicates选项：

import VueRouter from 'vue-router';
import routes from './routes';

const router = new VueRouter({
  routes,
  suppressNavigationDuplicates: true // 启用后会自动忽略重复导航
});

export default router;

Vue Router 4.x（Vue 3） #

这个版本移除了suppressNavigationDuplicates，可以通过全局错误处理来忽略：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

// 全局错误处理
app.config.errorHandler = (err) => {
  if (err.message.includes('Avoided redundant navigation to current location')) {
    return; // 忽略重复导航错误
  }
  // 其他错误正常打印
  console.error('应用错误:', err);
};

app.use(router).mount('#app');

为什么会出现这个错误？ #

Vue Router在更新后，为了避免无效的路由跳转，当检测到你要导航到当前已经激活的路由时，会返回一个被拒绝的Promise。如果你的代码没有捕获这个Promise的拒绝状态，浏览器就会在控制台抛出这个异常。

内容的提问来源于stack exchange，提问作者Ttalbi Aadil