开会员与付费前请必须阅读这篇文章，在首页置顶第一篇：（进站必看本站VIP介绍/购买须知）
本站所有源码均为自动秒发货，默认（百度网盘）
本站所有源码均为自动秒发货，默认（百度网盘）
路由守卫类型 & 使用场景（Vue Router 为例）
路由守卫一共分 3 大类：全局守卫、路由独享守卫、组件内守卫。
一、全局守卫
作用于整个项目所有路由，写在
router/index.js。1. 全局前置守卫 beforeEach
- 触发时机：路由跳转前
- 常用场景：
- 登录鉴权（未登录跳登录页）
- 权限判断
- 页面加载前的全局拦截
js
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth && !isLogin) next('/login')
else next()
})
2. 全局解析守卫 beforeResolve
- 触发时机：在导航确认前、所有组件内守卫 / 异步路由解析完毕后
- 场景：需要确保异步路由 / 组件加载完再做处理
3. 全局后置钩子 afterEach
- 触发时机：路由跳转完成后
- 无
next，不能拦截 - 场景：页面标题、埋点统计、关闭加载动画
js
router.afterEach((to) => {
document.title = to.meta.title
})
二、路由独享守卫
只作用于单个路由，写在路由配置里。
beforeEnter
- 触发时机：进入该路由前
- 场景：只对某一个路由做权限 / 校验，不污染全局
js
const routes = [
{
path: '/user',
component: User,
beforeEnter: (to, from, next) => {
// 只拦截 /user
}
}
]
三、组件内守卫
写在 .vue 组件内部，只属于该组件。
1. beforeRouteEnter
- 进入组件前触发
- 不能访问 this（组件未创建）
- 场景：进入页面前拦截、数据预获取
js
beforeRouteEnter(to, from, next) {
next(vm => {
// 通过 vm 访问组件实例
})
}
2. beforeRouteUpdate
- 路由参数变化但复用组件时触发（如 /detail/1 → /detail/2）
- 能访问 this
- 场景：列表页翻页、详情页 id 切换刷新数据
3. beforeRouteLeave
- 离开当前组件前触发
- 场景：表单未保存提示、清除定时器、关闭弹窗
js
beforeRouteLeave(to, from, next) {
if (this.formChanged) {
if (confirm('确定离开？数据将丢失')) next()
else next(false)
} else next()
}
快速选型口诀
- 全站统一拦截 → 全局 beforeEach
- 只拦单个页面 → 路由独享 beforeEnter
- 离开页面前提示 / 清理 → 组件内 beforeRouteLeave
- 路由参数变、组件复用时 → beforeRouteUpdate
- 跳转后统计 / 改标题 → afterEach
