vue router 通过导航守卫的 next() 控制跳转取消与重定向：全局前置守卫拦截未登录访问并存 redirect；路由独享守卫校验参数合法性；组件内守卫 beforerouteleave 实现离开确认。
在 Vue Router 中，跳转取消和重定向不是靠“阻止”或“覆盖”来硬性干预，而是通过导航守卫中对 next() 的返回值进行精确控制来实现的。核心在于：每次路由跳转都必须由守卫显式放行、中断或重定向，没有默认行为。
全局前置守卫中统一拦截未登录访问
这是最常用场景，比如用户点击“订单页”，但尚未登录，需跳转至登录页，且登录后自动回原路。
- 在
router.beforeEach中读取当前 token（务必每次实时读取，不能初始化时缓存） - 若目标路由需要登录（如配置了
meta: { requiresAuth: true }），而 token 为空，则中断跳转并重定向到登录页 - 同时把原目标路径存入 query，例如
{ path: '/login', query: { redirect: to.fullPath } } - 登录成功后，在登录组件里用
this.$router.push(to.query.redirect || '/home')返回
避免重定向死循环的关键写法
守卫中无条件跳转极易引发循环，比如登录页自身也被守卫重定向回首页。
- 所有重定向前必须加路径判断：若
to.path === '/login'，直接next()放行 - 不建议在守卫里根据
from做反向逻辑（如“从 /user 来就跳回首页”），边界难控 - 使用命名路由跳转（
{ name: 'Login' }）比字符串路径更安全，避免拼错路径导致无限 404 → 重定向 - 对 404 路由，用
to.matched.length === 0判断，重定向目标也必须是已注册的有效路由
路由独享守卫做参数校验与跳转取消
适用于某条路由有特定参数规则，不符合就取消跳转或跳转到默认页。
- 在路由配置中添加
beforeEnter，例如{ path: '/product/:id', beforeEnter: (to, from, next) => { ... } } - 检查
to.params.id是否为合法数字或符合正则，否则next('/product/0')或next(false)取消跳转 - 注意：动态参数校验不适合用
redirect配置实现，因为重定向仍会触发守卫，可能陷入循环；应优先用守卫内next()控制
组件内守卫控制离开前确认
当用户编辑表单未保存却想离开当前页，可用 beforeRouteLeave 提示并选择是否取消跳转。
- 在组件内部定义
beforeRouteLeave(to, from, next) - 弹出确认框：
if (confirm('离开将丢失未保存内容，确定吗？')) next() else next(false) - 也可异步判断，比如调用接口检查是否可离开，再决定调用
next()或next(false)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
