🌟一文搞懂 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 + 动态路由实现角色权限控制系统?
欢迎留言或者私信我你感兴趣的主题,我来帮你写出来!📘