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

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

收藏点赞关注不迷路!

Vue Router 是 Vue 项目的核心模块之一,控制着页面的切换与导航逻辑。但在开发过程中,很多同学对它的"导航守卫(钩子函数)"理解不够深入,常常问:

❓"beforeEach 和 beforeRouteEnter 有啥区别?"

❓"我应该在哪个钩子里判断权限?"

❓"数据要不要在路由进入前就加载好?"

今天这篇文章就带你一次性理清 Vue Router 的生命周期钩子,并结合实际场景讲清楚该用谁、怎么用、为什么这么用。


🧭一、什么是 Vue Router 的钩子函数?

钩子函数(也叫导航守卫)是 Vue Router 在路由跳转前后暴露给开发者的生命周期函数,类似组件的 createdmounted,用于在特定阶段执行逻辑。

按照触发位置,我们可以将其分为三类:

类型 注册位置 示例函数 用途
全局守卫 router 实例 beforeEachafterEach 全局登录验证、加载动画
路由独享守卫 单个路由 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 + 动态路由实现角色权限控制系统?

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

相关推荐
G等你下课11 分钟前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在11 分钟前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵14 分钟前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius14 分钟前
Unity URP管线着色器库攻略part1
前端
Xy91017 分钟前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端
lalalalalalalala20 分钟前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy20 分钟前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
snakeshe101022 分钟前
深入理解 React 中 useEffect 的 cleanUp 机制
前端
星月日23 分钟前
深拷贝还在用lodash吗?来试试原装的structuredClone()吧!
前端·javascript
爱学习的茄子24 分钟前
JavaScript闭包实战:解析节流函数的精妙实现 🚀
前端·javascript·面试