Vue Router 导航守卫全面解析

Vue Router 导航守卫全面解析

vue-router 🚦 The official router for Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-router

什么是导航守卫

导航守卫是 Vue Router 提供的一套路由拦截机制，允许开发者在路由导航过程中插入自定义逻辑。这些守卫就像路由导航过程中的"安检站"，可以决定是否允许导航继续、重定向到其他路由或完全取消导航。

导航守卫的类型

Vue Router 提供了三种主要类型的导航守卫：

1. 全局守卫

作用于所有路由导航

2. 路由独享守卫

只作用于特定路由配置

3. 组件内守卫

只作用于特定路由组件

全局守卫详解

beforeEach - 全局前置守卫

router.beforeEach((to, from, next) => {
  // 导航处理逻辑
})

参数说明：

• to: 即将进入的目标路由对象
• from: 当前导航正要离开的路由
• next: 必须调用的函数，决定导航行为

next函数用法：

• next(): 放行到下一个守卫
• next(false): 中断当前导航
• next('/path'): 重定向到指定路径
• next(error): 导航出错处理

重要提示： 必须调用next函数，否则导航将一直挂起。

beforeResolve - 全局解析守卫（2.5+）

router.beforeResolve((to, from, next) => {
  // 在导航被确认前调用
})

与beforeEach类似，但在所有组件内守卫和异步路由组件解析后调用。

afterEach - 全局后置钩子

router.afterEach((to, from) => {
  // 导航完成后调用
})

注意：没有next参数，不会影响导航本身。

路由独享守卫

可以在路由配置中直接定义beforeEnter守卫：

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 管理员权限验证逻辑
      }
    }
  ]
})

组件内守卫

组件内可以定义以下三种导航守卫：

beforeRouteEnter

beforeRouteEnter(to, from, next) {
  // 组件实例还未创建
  next(vm => {
    // 通过vm访问组件实例
  })
}

特点：

• 在组件创建前调用
• 无法访问this
• 支持给next传递回调

beforeRouteUpdate (2.2+)

beforeRouteUpdate(to, from, next) {
  // 当前路由改变但组件被复用时调用
  // 可以访问this
}

典型场景：动态参数路径（如/user/:id）切换时。

beforeRouteLeave

beforeRouteLeave(to, from, next) {
  // 离开该组件对应路由时调用
  // 可以访问this
}

常用场景：防止用户意外离开未保存的页面。

完整的导航解析流程

1. 导航被触发
2. 调用失活组件的beforeRouteLeave
3. 调用全局beforeEach
4. 调用重用组件的beforeRouteUpdate
5. 调用路由配置中的beforeEnter
6. 解析异步路由组件
7. 调用激活组件的beforeRouteEnter
8. 调用全局beforeResolve
9. 导航被确认
10. 调用全局afterEach
11. DOM更新
12. 执行beforeRouteEnter中传给next的回调

最佳实践

1. 权限控制：在全局守卫中检查用户权限
2. 数据预加载：在beforeRouteEnter中预加载数据
3. 表单保护：在beforeRouteLeave中防止未保存数据丢失
4. 动态标题：在afterEach中更新页面标题
5. 错误处理：使用next(error)处理导航错误

常见问题

1. 忘记调用next()：会导致导航挂起
2. 在beforeRouteEnter中访问this：组件实例尚未创建
3. 参数变化不触发守卫：需要使用beforeRouteUpdate或监听$route
4. 循环重定向：确保重定向逻辑不会无限循环

总结

Vue Router的导航守卫提供了强大的路由控制能力，理解并合理运用这些守卫可以构建更安全、更灵活的前端路由系统。根据不同的业务场景选择合适的守卫类型，并注意守卫的执行顺序和生命周期，可以大大提高应用的路由管理能力。

vue-router 🚦 The official router for Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-router