如何避免Vue路由守卫拦截时出现的冗余导航报错

问题核心 #

登出操作触发后，原本期望跳转到默认着陆页，但现有逻辑会先尝试跳转当前路由，路由守卫拦截后转向登录页，此时Vue路由的重复导航检查未识别到守卫的重定向逻辑，从而抛出Error: Avoided redundant navigation to current location: "/inside/home"错误。

修复方案 #

方案1：登出时直接指定跳转目标（跳过冗余路由跳转） #

修改登出逻辑，不再依赖路由守卫的拦截，而是在登出操作完成后直接跳转至登录页，同时添加当前路由判断避免重复跳转：

// 示例登出方法
async logout() {
  // 执行登出接口请求、清除用户缓存等操作
  await this.$api.auth.logout()
  this.$store.commit('user/clearInfo')
  
  // 判断当前是否已在登录页，避免重复跳转
  if (this.$route.path !== '/login') {
    this.$router.push('/login')
  }
}

方案2：在路由守卫中处理重复跳转逻辑 #

若需保留现有路由跳转逻辑，可在全局前置守卫中添加判断，当检测到未登录且目标路由需权限时，先校验登录页是否为当前路由，不一致再执行跳转：

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters['user/isLoggedIn']
  const requiresAuth = to.matched.some(item => item.meta.requiresAuth)

  if (requiresAuth && !isAuthenticated) {
    // 需权限但未登录，跳登录页前先判断是否重复
    if (to.path !== '/login') {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

方案3：全局捕获重复导航错误（临时应急方案） #

若上述方案无法适配现有业务逻辑，可在项目入口文件重写路由push方法，仅忽略重复导航错误：

// main.js
import VueRouter from 'vue-router'

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => {
    // 仅过滤重复导航错误，其他错误正常抛出
    if (err.name !== 'NavigationDuplicated') throw err
  })
}

最佳实践 #

优先选择方案1或方案2，从逻辑根源避免重复跳转场景；方案3仅作为临时解决手段，全局忽略错误可能掩盖其他潜在路由问题。

内容的提问来源于stack exchange，提问作者Michael Wiles