Vue路由守卫死循环会触发RangeError而非OOM，因无限嵌套调用耗尽调用栈，表现为卡死、白屏、URL不变；根本原因是守卫未正确终结导航，须确保每个分支唯一调用next()且避免无条件重定向。

Vue 路由守卫死循环不会直接造成传统意义的“内存溢出（OOM）”，但会快速耗尽 JavaScript 调用栈，触发 RangeError: Maximum call stack size exceeded，表现为页面卡死、白屏、URL 不变、组件不渲染——这是导航流程在 beforeEach 中无限嵌套触发所致，本质是逻辑失控，而非堆内存持续增长。

关键：每次守卫必须有且仅有一次 next 调用

死循环根源在于守卫函数反复执行却始终无法“终结”当前导航。常见错误是无条件调用 next('/login')，导致跳转后再次进入同一守卫，形成自循环。

• 所有分支（if、else、try/catch、异步 await 后）都必须显式调用 next()、next(false) 或 next('/xxx')
• 漏写 next() 会导致页面白屏；多写或无条件重定向则引发死循环
• 异步逻辑中，await 后必须紧跟 next，不能把 next 写在 await 外层或遗漏

防自循环：加路径判断再重定向

登录校验是最典型场景。若用户已位于 /login，却仍执行 next('/login')，就会触发循环。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 重定向前务必判断目标路径是否与当前 to.path 相同：如 if (to.path !== '/login')
• 推荐使用 replace: true，避免历史记录堆积，防止用户点“返回”又回到空页或重复触发守卫
• 示例安全写法：
  if (to.meta.needAuth && !token) {
    if (to.path !== '/login') {
      next({ path: '/login', replace: true });
    } else {
      next();
    }
  } else {
    next();
  }

防冗余跳转：避免相同路径二次导航

即使不是死循环，重复跳转到当前路由也会报 NavigationDuplicated 错误，虽不崩溃，但可能中断 Promise 链、干扰调试。

• 在触发 router.push 前，可简单比对 to.path === $route.path && JSON.stringify(to.query) === JSON.stringify($route.query)
• 菜单点击等用户操作中，建议加 v-if 或禁用状态，避免高频重复点击触发多次 push
• 守卫内部不要基于 from.path 做跳转决策（易误判），优先以 to 为准

辅助排查：快速定位守卫卡住

出现以下现象，基本可锁定为守卫逻辑问题：

• 点击菜单或输入 URL 后，页面长时间空白，#app 内无任何子节点
• 地址栏 URL 未变化，控制台无报错，网络请求也未发出
• 刷新页面能进，但通过内部跳转就卡住
• 加 console.time 发现守卫函数执行 10+ 次仍未结束

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！