🌟一文搞懂 Vue Router 的钩子函数和实战用法！
收藏点赞关注不迷路！
Vue Router 是 Vue 项目的核心模块之一，控制着页面的切换与导航逻辑。但在开发过程中，很多同学对它的"导航守卫（钩子函数）"理解不够深入，常常问：
❓"beforeEach 和 beforeRouteEnter 有啥区别？"
❓"我应该在哪个钩子里判断权限？"
❓"数据要不要在路由进入前就加载好？"
今天这篇文章就带你一次性理清 Vue Router 的生命周期钩子，并结合实际场景讲清楚该用谁、怎么用、为什么这么用。
🧭一、什么是 Vue Router 的钩子函数？
钩子函数（也叫导航守卫）是 Vue Router 在路由跳转前后暴露给开发者的生命周期函数，类似组件的 created、mounted，用于在特定阶段执行逻辑。
按照触发位置，我们可以将其分为三类：
类型
注册位置
示例函数
用途
全局守卫
router 实例
beforeEach、afterEach
全局登录验证、加载动画
路由独享守卫
单个路由
beforeEnter
单页权限控制
组件内守卫
组件内部
beforeRouteEnter 等
组件级数据初始化、退出确认
🔍二、全局导航守卫（最常用）
1️⃣ router.beforeEach
在每次路由切换前 触发，常用于登录验证、页面权限判断等逻辑。
ts
复制代码
// main.ts
router.beforeEach((to, from, next) => {
const isLoggedIn = Boolean(localStorage.getItem('token'))
if (to.meta.requiresAuth && !isLoggedIn) {
next('/login') // 未登录，跳转登录页
} else {
next() // 放行
}
})
✅ 实战场景：
判断用户是否登录
验证是否有权限访问某些页面（通过 to.meta.role）
显示加载动画（例如 NProgress）
2️⃣ router.afterEach
在每次路由跳转成功后触发，无法中断导航。
ts
复制代码
router.afterEach((to, from) => {
document.title = to.meta.title || '默认标题'
NProgress.done()
})
✅ 实战场景：
修改页面标题
结束 loading 动画
页面打点统计
🧩三、路由独享守卫（针对某个路由）
3️⃣ beforeEnter
写在路由配置中，只在进入该路由时触发。
ts
复制代码
{
path: '/admin',
component: AdminPage,
beforeEnter: (to, from, next) => {
const isAdmin = getUserRole() === 'admin'
if (isAdmin) next()
else next('/403')
}
}
✅ 实战场景：
控制某个页面的访问权限（如管理员后台）
页面首次进入时检查数据或状态
🧬四、组件内守卫（细粒度控制）
组件内钩子更接近"组件生命周期"，和 Vue 的组件保持一致风格。
4️⃣ beforeRouteEnter
在组件创建之前 调用，此时组件实例还没被创建，不能访问 this，但可以通过回调拿到实例。
ts
复制代码
beforeRouteEnter(to, from, next) {
next(vm => {
vm.fetchData() // 组件已创建，安全访问 this
})
}
✅ 场景：在页面进入时就要调用接口初始化数据。
5️⃣ beforeRouteUpdate
在当前组件被复用，但参数变了 时触发（如 /user/1 → /user/2）。
ts
复制代码
beforeRouteUpdate(to, from, next) {
this.userId = to.params.id
this.fetchUserDetail()
next()
}
✅ 场景：用户详情页参数切换但不销毁组件时更新数据。
6️⃣ beforeRouteLeave
离开当前路由前触发，可用于阻止页面跳转（如填写表单时提醒用户）。
ts
复制代码
beforeRouteLeave(to, from, next) {
if (this.isFormDirty) {
const answer = window.confirm('表单未保存，确定离开？')
if (answer) next()
else next(false)
} else {
next()
}
}
✅ 场景：表单防丢失、离开提醒弹窗
🚀五、开发中的实际应用场景大全
应用场景
推荐钩子
说明
登录验证
beforeEach
全局校验，无需重复写
页面权限控制
beforeEach + to.meta.role
结合用户角色判断
动态标题设置
afterEach
修改 document.title
管理后台限制
beforeEnter
针对单个页面，清晰明了
页面初始化请求
beforeRouteEnter
路由刚进入时就发请求
参数变更刷新
beforeRouteUpdate
params 变化时重新加载内容
离开前提醒
beforeRouteLeave
表单编辑页的经典用法
加载动画控制
beforeEach + afterEach
与 NProgress 等配合
🎯六、总结：玩转导航钩子让路由更智能
Vue Router 的钩子函数，就像是给路由加上的"生命周期"，让我们可以灵活地控制每一次导航行为。不管是登录验证、权限控制、数据初始化、页面离开确认，都能找到合适的钩子来实现。
🔑 记住这个使用顺序：
scss
复制代码
beforeEach (全局前置守卫)
→ beforeEnter (路由独享守卫)
→ beforeRouteEnter (组件进入)
→ beforeRouteUpdate (复用时更新)
→ beforeRouteLeave (离开前提示)
→ afterEach (全局后置守卫)
✅最后说一句
如果你看到这里，说明你已经掌握了 Vue Router 钩子的核心技能！别忘了 点赞 + 收藏 + 关注 一波 🧡，让我有动力继续写下去！
下篇文章我们可以聊聊：
🧩 如何用 Vue Router + 动态路由实现角色权限控制系统？
欢迎留言或者私信我你感兴趣的主题，我来帮你写出来！📘