Vue Router全局beforeEach守卫触发无限循环栈溢出如何解决？

问题根因 #

你触发无限循环的核心原因是只要给next()传入非空参数，就会中断当前导航，触发一轮全新的全局守卫逻辑。你现在的代码无论什么场景都给next()传入了options对象，相当于每一轮守卫都会触发新的导航，无限递归最终导致栈溢出。

解决方案 #

调整逻辑，仅在必要时触发replace导航，同时增加自定义标记避免重复处理，修改后代码如下：

router.beforeEach((to, from, next) => {
  // 已标记为replace处理过、或不需要排除的页面，直接放行不触发新导航
  if (to.meta._replaceHandled || !checkPagesToExclude(to)) {
    return next()
  }
  // 仅对首次命中排除规则的导航，添加replace参数和处理标记
  next({
    ...to,
    meta: {
      ...to.meta,
      _replaceHandled: true
    },
    replace: true
  })
})

逻辑说明 #

• 首次进入守卫时，如果命中checkPagesToExclude校验，会触发一次新的replace模式导航，同时给路由meta添加临时标记_replaceHandled
• 第二次进入守卫时，检测到_replaceHandled标记存在，直接调用无参数的next()放行当前导航，不会再触发新的守卫逻辑，彻底避免无限循环
• 这种写法保留了原有的路由参数、query、hash等所有信息，不会影响页面加载逻辑，同时实现了命中规则的页面不插入历史栈的需求，回退时会直接跳过这些页面回到上一个普通页面。

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