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. 全局守卫

全局守卫作用于所有路由导航：

const router = new VueRouter({ /* 路由配置 */ })

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 导航处理逻辑
})

// 全局解析守卫 (2.5.0+)
router.beforeResolve((to, from, next) => {
  // 在导航被确认前调用
})

// 全局后置钩子
router.afterEach((to, from) => {
  // 导航完成后调用，无next参数
})

2. 路由独享守卫

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

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 仅对该路由生效
      }
    }
  ]
})

3. 组件内守卫

在路由组件内部定义的守卫：

export default {
  beforeRouteEnter(to, from, next) {
    // 组件实例尚未创建
    next(vm => {
      // 通过回调访问组件实例
    })
  },
  
  beforeRouteUpdate(to, from, next) {
    // 当前路由改变但组件被复用时调用
    this.data = fetchData(to.params.id)
    next()
  },
  
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件时调用
    if (this.unsavedChanges) {
      if (confirm('有未保存的更改，确定离开？')) {
        next()
      } else {
        next(false)
      }
    } else {
      next()
    }
  }
}

导航守卫执行流程

完整的导航解析流程如下：

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

使用场景示例

权限控制

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

页面离开确认

beforeRouteLeave(to, from, next) {
  if (this.formChanged) {
    const answer = window.confirm('您有未保存的更改，确定要离开吗？')
    if (answer) {
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
}

数据预加载

beforeRouteEnter(to, from, next) {
  fetchData(to.params.id).then(data => {
    next(vm => vm.setData(data))
  })
}

注意事项

1. 参数变化不会触发进入/离开守卫
   对于动态路由参数变化，应使用 beforeRouteUpdate 或监听 $route 对象。

2. 确保调用 next 方法
   每个守卫函数都必须调用 next() 来继续流程，否则导航会一直处于等待状态。

3. 组件实例访问
   beforeRouteEnter 是唯一一个在组件实例创建前执行的守卫，需要通过回调访问实例。

4. 错误处理
   可以通过 next(error) 来中断导航并处理错误。

通过合理使用导航守卫，可以构建出更加健壮和安全的 Vue 应用路由系统。

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