vue3路由守卫使用示例

### Vue 3 路由守卫的使用方法 Vue 3 中的路由守卫是 Vue Router 提供的一种机制，用于在导航过程中执行特定逻辑，如权限验证、页面标题切换、数据预取等操作。它通过拦截路由跳转并根据条件决定是否允许导航继续执行，从而增强应用的安全性和控制力。 #### 全局前置守卫（beforeEach） 全局前置守卫是在每次路由跳转前被调用的钩子函数，适用于全局范围内的导航控制。该守卫常用于身份验证和权限检查。 ```ts const router = createRouter({ history: createWebHistory(), routes }); router.beforeEach((to, from, next) => { // 示例：判断用户是否登录 const isAuthenticated = checkAuth(); if (to.meta.requiresAuth && !isAuthenticated) { next('/login'); // 未登录则跳转至登录页 } else { next(); // 否则正常进入目标路由 } }); ``` 此守卫适用于需要在路由确认之前进行统一处理的场景[^4]。 #### 全局解析守卫（beforeResolve） 全局解析守卫在导航被确认但组件尚未渲染时触发，通常用于数据预加载或异步验证操作。 ```ts router.beforeResolve((to, from, next) => { // 在这里可以进行异步数据获取或额外校验 fetchData().then(data => { to.meta.data = data; next(); }); }); ``` 该守卫适合在组件渲染前完成关键数据的准备过程[^4]。 #### 全局后置钩子（afterEach） 全局后置钩子不会影响导航流程，仅用于在导航完成后执行某些副作用操作，例如记录访问日志或设置页面标题。 ```ts router.afterEach((to, from) => { document.title = to.meta.title || '默认标题'; }); ``` 此钩子适用于不需要中断导航的辅助性任务[^3]。 #### 单个路由独享守卫（beforeEnter） 可以在特定路由配置中定义 `beforeEnter` 守卫，用于对该路由单独执行进入前的逻辑判断。 ```ts const routes = [ { path: '/dashboard', component: Dashboard, beforeEnter: (to, from, next) => { if (checkUserPermission()) { next(); } else { next('/unauthorized'); } } } ]; ``` 这种守卫适用于只对某个特定路由生效的场景，避免全局影响其他路径[^2]。 #### 组件内守卫 Vue 3 还支持在组件内部定义守卫，包括： - **beforeRouteEnter**：在进入组件对应的路由前调用，此时组件实例尚未创建。 - **beforeRouteUpdate**：当路由参数发生变化但仍复用相同组件时调用。 - **beforeRouteLeave**：在离开当前组件对应的路由前调用，常用于表单未保存提示。 ```ts export default { beforeRouteEnter(to, from, next) { next(vm => { // 可以访问组件实例 }); }, beforeRouteUpdate(to, from, next) { // 处理路由参数变化 next(); }, beforeRouteLeave(to, from, next) { const isConfirmed = window.confirm('您有未保存的更改，确定离开吗？'); if (isConfirmed) { next(); } else { next(false); } } }; ``` 这些守卫提供了细粒度的导航控制能力，特别适用于与组件状态相关的逻辑处理[^4]。 --- ###

<think>好的，用户想了解Vue3中路由守卫的使用方法和示例。我需要根据提供的引用资料来整理回答。首先，路由守卫的类型有很多，比如全局前置守卫、路由独享守卫和组件内守卫。需要分门别类地说明每种守卫的使用场景和示例。 用户可能希望得到具体的代码示例，尤其是Vue3的组合式API写法。比如，全局前置守卫通常用于权限验证，这时候可以用router.beforeEach，检查用户是否登录，否则跳转到登录页面。参考引用5中的示例，可以展示如何实现这一逻辑。 另外，组件内守卫在Vue3中可能有不同的写法，比如使用onBeforeRouteLeave等组合式API函数。需要说明在setup函数中如何使用这些钩子，例如处理未保存的表单数据，引用4提到了组件离开守卫的应用场景，可以结合这个给出例子。 路由独享守卫的话，引用3和引用2提到可以在路由配置中直接定义beforeEnter，适合特定路由的权限检查，比如管理员页面。这里需要提供一个简单的代码示例，展示在定义路由时如何添加beforeEnter方法。 还需要注意Vue3和Vue2的区别，比如在组件内守卫中，组合式API的用法可能和选项式API不同，需要明确指出如何使用onBeforeRouteUpdate等函数。引用4中的示例是选项式API，可能需要转换成组合式API的写法。 最后，用户可能关心常见问题，比如死循环或权限验证逻辑，引用7提到如何处理这些问题，应该在注意事项里简单说明，比如确保next()被调用，避免无限重定向。 总结下来，回答的结构应该是先介绍路由守卫的类型，然后分别给出每种类型的示例，最后加上注意事项和常见问题。这样用户能清晰了解不同守卫的使用方法和实际应用场景。</think>### Vue3 路由守卫使用指南及示例 #### 一、路由守卫核心类型与使用场景 1. **全局前置守卫 (`beforeEach`)** 用于路由跳转前的全局逻辑控制（如登录验证、权限校验）。 ```javascript // main.js router.beforeEach((to, from, next) => { const isAuthenticated = localStorage.getItem('token'); if (to.meta.requiresAuth && !isAuthenticated) { next('/login'); // 重定向到登录页 } else { next(); // 允许导航 } }); ``` 若路由配置包含元信息 `meta: { requiresAuth: true }`，未登录用户访问受限页面会被拦截[^5]。 2. **路由独享守卫 (`beforeEnter`)** 针对特定路由的校验逻辑（如管理员权限验证）。 ```javascript // router.js const routes = [ { path: '/admin', component: AdminPanel, beforeEnter: (to, from, next) => { if (user.role !== 'admin') next('/403'); // 无权限跳转 else next(); } } ]; ``` 3. **组件内守卫**（组合式API写法） 在组件中直接控制导航行为（如离开页面前提示保存数据）。 ```vue <script setup> import { onBeforeRouteLeave } from 'vue-router'; onBeforeRouteLeave((to, from, next) => { if (formData.isDirty) { const confirmExit = window.confirm('数据未保存，确认离开？'); confirmExit ? next() : next(false); // 阻止导航 } else { next(); } }); </script> ``` 此方法替代了选项式API的 `beforeRouteLeave`[^4]。 #### 二、进阶使用技巧 1. **动态路由权限控制** 结合角色权限动态生成可访问路由： ```javascript router.beforeEach(async (to) => { const userRoles = await fetchUserRoles(); if (!hasPermission(userRoles, to.meta.requiredRole)) { return { path: '/unauthorized' }; } }); ``` 2. **全局后置钩子 (`afterEach`)** 适用于导航完成后操作（如埋点统计）： ```javascript router.afterEach((to) => { analytics.trackPageView(to.fullPath); }); ``` #### 三、注意事项 1. **避免死循环** 在重定向逻辑中需设置终止条件： ```javascript router.beforeEach((to, from, next) => { if (to.path === '/login' && isLoggedIn) { next('/dashboard'); // 已登录用户禁止重复访问登录页 } else { next(); } }); ``` 2. **异步逻辑处理** 使用 `async/await` 处理异步验证： ```javascript router.beforeEach(async (to, from, next) => { try { await store.dispatch('checkSession'); next(); } catch (error) { next('/error'); } }); ```