一文搞懂 Vue Router 的钩子函数和实战用法！

🌟一文搞懂 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 + 动态路由实现角色权限控制系统？

欢迎留言或者私信我你感兴趣的主题，我来帮你写出来！📘

一文搞懂 Vue Router 的钩子函数和实战用法！