next是导航决议函数,决定放行、重定向、取消或报错;必须且仅调用一次,分清next()、next(false)、next('/path')、next({path, replace: true})四种行为,防死循环需判断目标路径,动态路由需兜底或等待就绪。

Vue 路由守卫中,next 不是“跳转函数”,而是“导航决议函数”——它决定当前这次导航的最终命运:放行、重定向、取消,或报错。用错 next,就会卡住、循环、白屏。
next() 的四种行为必须分清
每种调用方式对应一种明确的导航意图,不能混用:
- next():允许当前导航继续,走原定路线(如 /user → /profile),进入下一个守卫或渲染组件
- next(false):立即终止本次导航,URL 不变,页面停留不动(适合无权限且不想暴露登录页的场景)
- next('/login') 或 next({ path: '/login' }):中断当前导航,发起一次全新导航;但若不加路径判断,极易触发死循环
- next({ path: '/login', replace: true }):跳转同时替换当前 history 记录,避免用户点返回回到空白页或非法状态
防死循环的关键:跳转前先判断目标路径
比如登录校验,不能无条件执行 next('/login'):
从零开始编排 SpringBoot+Vue 全栈项目工作流,适用于新建全栈项目或完整脚手架请求,触发后依次调用 product‑spec‑builder(需求调研)等模块。
- 错误写法:
if (!isLogin) next('/login')→ 每次都触发新导航,新导航又进守卫,无限套娃 - 正确写法:
if (!isLogin && to.path !== '/login') { next('/login') } else { next() } - 更稳妥还可加 query 参数记录来源:
next({ path: '/login', query: { redirect: to.fullPath } })
所有分支都必须调用 next,一次且仅一次
这是最容易忽略却最致命的规则。只要进了守卫,就必须有且仅有一次 next 调用,否则导航会挂起、页面卡死:
立即学习“前端免费学习笔记(深入)”;
- 不能写成:
if (to.meta.requiresAuth && !token) next('/login'); next()→ 未登录时 next 被调两次 - 必须包在 if-else 或 switch 中,确保每个逻辑出口都有 next,例如:
if (token) next()
else next('/login')
} else {
next()
}
动态路由或异步加载时的额外注意
使用 router.addRoute() 添加新路由后,首次访问可能因路由未就绪而匹配失败:
- 可在 beforeEach 中兜底:
if (!router.hasRoute(to.name)) next('/404') - 或等待路由加载完成:
router.isReady().then(() => { /* 守卫逻辑 */ }) - 组件内守卫(
beforeRouteLeave)对to.fullPath更敏感,跳转需严格比对,避免误重定向


















