Vue Router 中有 三种主要的路由守卫（导航守卫），用于在路由跳转过程中进行拦截、校验或执行逻辑。
一、全局守卫（Global Guards）
1. beforeEach
在每次导航前触发。
可用于权限验证、登录状态检查等。
router.beforeEach((to, from, next) => {
console.log('全局前置守卫')
next() // 必须调用 next() 才能继续导航
})
2. beforeResolve
所有组件内守卫解析完后触发。
很少用，但可以处理一些更靠后的逻辑。
router.beforeResolve((to, from, next) => {
console.log('全局解析守卫')
next()
})
3. afterEach
导航完成后触发（没有 next，不能中断导航）。
可用于页面打点、设置标题、关闭 loading 等。
router.afterEach((to, from) => {
console.log('全局后置守卫')
})
二、路由独享守卫（Per-Route Guard）
在定义路由时写在 meta 外的配置项中。
{
path: '/admin',
component: Admin,
beforeEnter: (to, from, next) => {
console.log('路由独享守卫')
next()
}
}
三、组件内守卫（In-Component Guards）
只能在使用 Vue Component 的路由中触发（即被
1. beforeRouteEnter(to, from, next)
路由进入前调用。
注意：this 还未被创建，不能访问 this！
如果需要访问组件实例，可以使用 next(vm => {})
beforeRouteEnter(to, from, next) {
next(vm => {
console.log('组件内 beforeRouteEnter', vm)
})
}
2. beforeRouteUpdate(to, from, next)
在当前组件复用时（参数变了）调用。
beforeRouteUpdate(to, from, next) {
console.log('组件内 beforeRouteUpdate')
next()
}
3. beforeRouteLeave(to, from, next)
离开当前组件前触发。
常用于提示保存、拦截离开等。
beforeRouteLeave(to, from, next) {
const answer = window.confirm('确定要离开吗？未保存的内容将丢失！')
if (answer) next()
else next(false)
}
总结对比表：
守卫类型
位置
触发时机
是否可以阻止导航
beforeEach
全局
每次导航前
✅
beforeResolve
全局
所有组件守卫后
✅
afterEach
全局
每次导航完成后
❌（不能阻止）
beforeEnter
路由独享
进入该路由前
✅
beforeRouteEnter
组件内
路由进入组件前
✅（无 this）
beforeRouteUpdate
组件内
复用组件时
✅
beforeRouteLeave
组件内
离开组件前
✅