vue3 路由守卫

### Vue 3 中路由守卫的使用方法及常见问题解决方案 #### 1. 路由守卫类型 Vue 3 中的路由守卫分为以下几类，每种守卫适用于不同的场景[^2]。 - **全局前置守卫 (`beforeEach`)** 在每次导航之前触发，适合用于鉴权、页面跳转逻辑等。 ```javascript import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes: [...], }); router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated()) { next('/login'); // 如果需要鉴权且未登录，则重定向到登录页 } else { next(); // 否则继续导航 } }); ``` - **全局解析守卫 (`beforeResolve`)** 在导航和组件内守卫被调用后、组件渲染前触发，适合处理异步数据获取。 ```javascript router.beforeResolve((to, from, next) => { if (to.meta.requiresData && !dataLoaded()) { fetchData().then(() => next()); } else { next(); } }); ``` - **全局后置钩子 (`afterEach`)** 在导航完成后触发，无 `next` 参数，适合用于记录日志或更新页面标题。 ```javascript router.afterEach((to, from) => { document.title = to.meta.title || '默认标题'; }); ``` - **路由独享守卫 (`beforeEnter`)** 仅对该路由生效，适合特定路由的额外逻辑。 ```javascript const routes = [ { path: '/admin', component: AdminPanel, beforeEnter: (to, from, next) => { if (!isAdmin()) { next('/'); } else { next(); } }, }, ]; ``` - **组件内守卫** 定义在组件内部，包括 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave`。 ```javascript export default { beforeRouteEnter(to, from, next) { next(vm => { console.log('进入组件时执行', vm); }); }, beforeRouteUpdate(to, from, next) { console.log('组件更新时执行'); next(); }, beforeRouteLeave(to, from, next) { const confirmLeave = window.confirm('确定离开吗？'); if (confirmLeave) { next(); } else { next(false); } }, }; ``` #### 2. 实现鉴权的基本思路 鉴权是指验证用户是否有权限访问某个页面。通常通过设置路由元信息 (`meta`) 来实现[^1]。 ```javascript const routes = [ { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true }, // 标记此路由需要鉴权 }, ]; ``` 在全局前置守卫中检查 `requiresAuth`，如果用户未登录则重定向到登录页面。 #### 3. 常见问题及解决方案 - **无限循环问题** 如果在守卫中错误地调用了 `next()` 或多次触发导航，可能会导致无限循环。确保逻辑清晰，避免重复调用 `next()`[^3]。 - **路由守卫失效问题** 确保正确引入了路由实例，并且守卫逻辑没有语法错误或条件判断失误[^4]。 - **页面刷新后参数丢失问题** 在 Vue Router 中，可以通过 `query` 或 `params` 传递参数。为了防止刷新后参数丢失，可以将参数存储在 `localStorage` 或 `sessionStorage` 中[^5]。 #### 4. 进阶：动态路由和权限控制 动态路由允许根据用户角色动态加载路由配置。基于角色的权限控制可以通过过滤路由列表来实现。 ```javascript function loadRoutesBasedOnRole(role) { const baseRoutes = [ { path: '/home', component: Home }, ]; if (role === 'admin') { return baseRoutes.concat([ { path: '/admin', component: AdminPanel }, ]); } return baseRoutes; } const routes = loadRoutesBasedOnRole(userRole); ``` ###