Vue Router 导航守卫全面解析：掌控路由跳转的每个环节-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01101/article/details/148375258

Vue Router 导航守卫全面解析：掌控路由跳转的每个环节

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

什么是导航守卫？

导航守卫是 Vue Router 提供的一套路由拦截机制，它允许开发者在路由跳转的不同阶段插入自定义逻辑，实现对导航流程的精细控制。就像现实中的安检关卡一样，导航守卫可以决定是否允许跳转、是否需要重定向或取消当前导航。

导航守卫的分类

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

1. 全局守卫（作用于所有路由）

全局前置守卫 beforeEach

router.beforeEach((to, from, next) => {
  // 在这里进行权限检查等操作
  next() // 必须调用next()才能继续路由跳转
})

全局解析守卫 beforeResolve（2.5.0+）

router.beforeResolve((to, from, next) => {
  // 在所有组件内守卫和异步路由组件解析后调用
  next()
})

全局后置钩子 afterEach

router.afterEach((to, from) => {
  // 导航已经完成，无法改变导航结果
  // 适合用于页面统计等操作
})

2. 路由独享守卫（作用于特定路由）

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

3. 组件内守卫（作用于特定组件）

const User = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 组件实例尚未创建，无法访问this
    next(vm => {
      // 通过回调参数vm访问组件实例
    })
  },
  beforeRouteUpdate(to, from, next) {
    // 当前路由改变但组件被复用时调用
    // 可以访问this
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 离开该组件对应路由时调用
    // 可以访问this
    if (unsavedChanges()) {
      if (confirm('有未保存的更改，确定离开吗？')) next()
      else next(false)
    } else next()
  }
}