Vue.js 中路由守卫的使用场景和实现方式

Vue.js 中路由守卫的核心作用是通过控制导航流程实现权限验证、数据预加载和日志记录等功能，其实现方式包括全局守卫、路由独享守卫和组件内守卫三种类型。

• 权限验证通过检查用户身份或权限标记（如路由的 meta 字段），阻止未授权访问特定页面。例如：未登录用户访问 /dashboard 时重定向到登录页。
• 数据预加载在进入路由前异步加载所需数据（如用户详情、列表数据），避免页面空白或闪烁。例如：加载用户数据后再渲染详情页。
• 日志记录记录用户导航行为（如访问时间、路径），用于分析用户行为或审计。例如：在 afterEach 中发送页面访问日志。
• 导航控制根据业务逻辑动态调整导航行为（如取消导航、重定向）。例如：表单未保存时提示用户确认离开。

• 全局前置守卫（beforeEach）在每次路由导航前触发，常用于权限验证。

  router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated()) { next({ path: '/login', query: { redirect: to.fullPath } }); } else { next(); }});

  关键点：通过 to.meta 读取路由元信息，next() 必须调用以继续导航。

• 全局解析守卫（beforeResolve）在所有组件内守卫和异步路由组件解析后触发，适合数据预加载。

  router.beforeResolve(async (to, from, next) => { if (to.name === 'UserDetails') { try { await store.dispatch('fetchUser', to.params.id); next(); } catch { next({ name: 'NotFound' }); } } else { next(); }});

  关键点：支持异步操作，需处理成功/失败场景。

• 全局后置钩子（afterEach）导航完成后触发，用于日志记录或页面标题更新。

  router.afterEach((to, from) => { console.log(`Navigated from ${from.path} to ${to.path}`);});

在路由配置中直接定义，仅对特定路由生效。

• 适用场景：单个路由的权限控制或数据加载。

• beforeRouteEnter在组件渲染前触发，无法访问 this，但可通过 next(vm => {...}) 访问组件实例。

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

• beforeRouteUpdate在当前路由复用时触发（如动态参数变化）。

  beforeRouteUpdate(to, from, next) { if (to.params.id !== from.params.id) { this.loadData(to.params.id); } next();}

• beforeRouteLeave在离开组件时触发，常用于表单未保存提醒。

  beforeRouteLeave(to, from, next) { if (this.formIsDirty) { if (confirm('Discard changes?')) next(); else next(false); // 取消导航 } else { next(); }}

1. 触发导航：用户点击链接或调用 router.push。
2. 执行顺序：

   调用离开组件的 beforeRouteLeave。

   调用全局前置守卫 beforeEach。

   调用路由独享守卫 beforeEnter。

   解析异步路由组件（如动态导入）。

   调用全局解析守卫 beforeResolve。

   调用进入组件的 beforeRouteEnter。

   导航完成，触发 afterEach。

• 无限循环：在守卫中重复导航到当前路径（如未认证时重定向到 /login，但 /login 也需认证）。解决方案：排除登录页的权限检查。
• 异步未处理：未调用 next() 或未等待异步操作完成。解决方案：确保所有代码路径均调用 next()，异步操作使用 async/await。
• 调试技巧：

  在守卫中添加 console.log 跟踪执行流程。

  使用浏览器开发者工具的 Sources 面板设置断点。

• 减少全局守卫数量：仅在必要路由使用全局守卫，避免冗余检查。
• 异步守卫优化：合并多个异步请求（如使用 Promise.all）减少等待时间。
• 代码复用：将通用逻辑（如权限验证）抽离为独立函数或插件。// auth.jsexport function checkAuth(to, next) { if (to.meta.requiresAuth && !isAuthenticated()) { next({ path: '/login', query: { redirect: to.fullPath } }); } else { next(); }}// router.jsimport { checkAuth } from './auth';router.beforeEach((to, from, next) => checkAuth(to, next));
• 懒加载与守卫结合：对异步组件使用 beforeEnter 预加载数据，避免页面卡顿。

通过合理使用路由守卫，可以显著提升 Vue.js 应用的安全性、用户体验和可维护性。