Vue.js 路由守卫完全指南：8个导航钩子执行流程详解

Vue.js 路由守卫完全指南：8个导航钩子执行流程详解

【免费下载链接】vue-analysis :thumbsup: Vue.js 源码分析 项目地址: https://gitcode.com/gh_mirrors/vu/vue-analysis

Vue.js 的导航守卫是路由系统中非常重要的功能，它允许我们在路由切换的不同阶段执行特定的逻辑。通过导航守卫，我们可以实现权限控制、数据预加载、页面访问统计等功能。Vue Router 提供了完整的导航守卫机制，确保路由切换的可控性和灵活性。😊

什么是导航守卫？

导航守卫本质上是路由切换过程中执行的一系列钩子函数。当路由发生改变时，Vue Router 会按照特定的顺序依次调用这些守卫，让开发者有机会在关键时刻介入路由导航过程。

在 Vue.js 应用中，导航守卫就像是交通警察🚦，在车辆（路由）行驶过程中进行指挥和管控。

完整的执行流程

Vue Router 的导航守卫执行遵循严格的顺序，整个过程分为 8 个关键步骤：

1. 失活组件的离开守卫

当路由切换时，首先会调用即将被离开的组件中的 beforeRouteLeave 守卫。这个守卫通常用于处理未保存的表单数据、确认用户是否真的要离开当前页面等场景。

2. 全局前置守卫

调用通过 router.beforeEach 注册的全局守卫。这些守卫会在每个路由切换时都被调用，非常适合做统一的权限校验。

3. 重用组件的更新守卫

如果组件被复用（比如从 /user/1 切换到 /user/2），会调用组件内的 beforeRouteUpdate 守卫。

4. 路由配置的进入守卫

执行在路由配置中直接定义的 beforeEnter 守卫，这个守卫只在进入该路由时触发。

5. 异步组件解析

这一步会解析路由中使用的异步组件。Vue Router 会等待所有异步组件加载完成后再继续后续的导航流程。

6. 激活组件的进入守卫

在被激活的组件中调用 beforeRouteEnter 守卫。需要注意的是，此时组件实例还未创建，所以在这个守卫中无法访问 this。

7. 全局解析守卫

调用通过 router.beforeResolve 注册的全局守卫。此时导航已经被确认，组件实例也已经创建。

8. 全局后置钩子

最后调用通过 router.afterEach 注册的全局钩子，这些钩子不会改变导航本身。

核心源码解析

导航守卫的核心实现在 vue-router/src/history/base.js 文件的 confirmTransition 方法中：

const queue: Array<?NavigationGuard> = [].concat(
  extractLeaveGuards(deactivated),    // 步骤1
  this.router.beforeHooks,            // 步骤2
  extractUpdateHooks(updated),           // 步骤3
  activated.map(m => m.beforeEnter),      // 步骤4
  resolveAsyncComponents(activated)       // 步骤5
)

队列执行机制

Vue Router 使用 runQueue 函数来管理导航守卫的执行顺序。这个函数定义在 vue-router/src/util/async.js 中，采用经典的异步队列执行模式，确保每个守卫都按顺序执行。

实用技巧和最佳实践

权限控制实现

利用全局前置守卫可以轻松实现页面访问权限控制：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

数据预加载

在进入守卫中进行数据预加载，提升用户体验：

beforeRouteEnter(to, from, next) {
  // 在组件实例创建前进行数据预加载
  fetchData().then(data => {
    next(vm => {
      vm.data = data
    })
})

总结

Vue.js 的导航守卫系统设计得非常完善，通过 8 个有序的步骤，为开发者提供了全方位的路由控制能力。掌握这些守卫的执行顺序和适用场景，能够让我们在开发中更加得心应手。✨

通过合理使用导航守卫，我们可以构建出更加健壮、用户体验更好的单页面应用。无论是简单的权限校验，还是复杂的数据预加载逻辑，导航守卫都能提供完美的解决方案。

【免费下载链接】vue-analysis :thumbsup: Vue.js 源码分析 项目地址: https://gitcode.com/gh_mirrors/vu/vue-analysis