vue实现路由守卫

Vue 路由守卫的实现方法

Vue Router 提供了多种路由守卫（Navigation Guards），用于在路由跳转前后执行特定逻辑，例如权限验证、页面跳转拦截等。以下是常见的路由守卫实现方式：

全局前置守卫（beforeEach）

在路由跳转前执行，常用于登录验证或权限控制：

router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth() // 自定义验证方法
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

全局解析守卫（beforeResolve）

在导航被确认前触发，适合获取数据或执行异步操作：

router.beforeResolve(async (to, from, next) => {
  try {
    await fetchData() // 异步操作
    next()
  } catch (error) {
    next('/error')
  }
})

全局后置钩子（afterEach）

路由跳转完成后触发，适合页面统计或日志记录：

router.afterEach((to, from) => {
  sendToAnalytics(to.fullPath) // 自定义统计方法
})

路由独享守卫（beforeEnter）

在单个路由配置中定义：

const routes = [
  {
    path: '/admin',
    component: AdminPanel,
    beforeEnter: (to, from, next) => {
      if (!isAdmin()) next('/forbidden')
      else next()
    }
  }
]

组件内守卫

在组件内部定义：

• beforeRouteEnter：进入组件前调用
• beforeRouteUpdate：路由变化但组件复用时调用
• beforeRouteLeave：离开组件前调用

export default {
  beforeRouteEnter(to, from, next) {
    // 不能访问组件实例(this)
    next(vm => {
      // 通过vm访问组件实例
    })
  },
  beforeRouteUpdate(to, from, next) {
    // 可以访问this
    this.userData = null
    next()
  },
  beforeRouteLeave(to, from, next) {
    if (this.hasUnsavedChanges) {
      if (!confirm('确定离开？')) return next(false)
    }
    next()
  }
}

路由守卫执行顺序

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

路由元信息（meta）

可通过 meta 字段传递自定义信息：

const routes = [
  {
    path: '/profile',
    component: Profile,
    meta: { requiresAuth: true }
  }
]

在守卫中通过 to.meta 访问这些信息。