Vue Router 有哪些导航守卫？导航流程是怎样的？

详细解析#

守卫分类#

用返回值控制导航#

Vue Router 4 中，守卫可以通过返回值控制导航，next 参数变成了可选的：

• 返回 false：取消导航
• 返回一个路由地址（字符串或对象）：重定向到这个地址
• 不返回（undefined）或返回 true：继续导航
• 守卫可以是 async 函数，Vue Router 会等它完成；守卫中抛出错误也会取消导航

如果仍然使用 next，要保证每条执行路径上都恰好调用一次。

完整的导航解析流程#

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

组合式 API 中的 onBeforeRouteLeave、onBeforeRouteUpdate 分别在第 2、4 步执行。

路由懒加载#

路由组件一般使用懒加载，例如 component: () => import('./views/UserDetail.vue')，第一次访问这个路由时才加载对应的代码，也就是上面第 6 步解析的异步路由组件。hash 模式和 history 模式的原理详见 前端路由，页面缓存详见 keep-alive 的作用和原理。

代码示例#

用 beforeEach 实现登录拦截：

import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/login', name: 'Login', component: () => import('@/views/Login.vue') },
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue'),
      // 用 meta 标记需要登录的页面
      meta: { requiresAuth: true, title: '首页' },
    },
  ],
})

router.beforeEach((to) => {
  // 在守卫内部获取 store，此时 pinia 已经安装
  const userStore = useUserStore()

  // 只拦截需要登录的页面。登录页没有 requiresAuth，不会被反复重定向
  if (to.meta.requiresAuth && !userStore.token) {
    // 带上原本要去的地址，登录成功后跳回去
    return { name: 'Login', query: { redirect: to.fullPath } }
  }
  // 不返回任何值，表示放行
})

router.afterEach((to) => {
  document.title = to.meta.title || '管理后台'
})

export default router

面试官可能追问#

易错点#

• beforeEnter 只在从其他路由进入时调用，同一个路由内只改变 params、query 或 hash 时不会调用
• 在路由守卫中使用 Pinia，要在守卫函数内部调用 useXxxStore()，在模块顶层调用时 pinia 可能还没有安装，详见 Pinia 和 Vuex 的区别
• 路由懒加载直接写 () => import(...)，不要用 defineAsyncComponent 包裹