vue路由导航守卫

<think>我们正在讨论Vue路由导航守卫。根据引用内容，导航守卫是Vue Router提供的一种机制，允许在路由跳转前后执行自定义逻辑（如鉴权、重定向等）。守卫分为全局守卫、路由独享守卫和组件内守卫。 用户要求了解使用方法和示例，因此我们需要详细解释每种守卫的使用方法，并提供示例代码。 根据引用[1]：导航守卫用于在路由跳转前后执行自定义逻辑。 引用[2]提到导航守卫的类型和执行流程。 引用[3]和[4]详细说明了三种守卫：全局守卫、路由独享守卫和组件内守卫，并强调要注意执行顺序和next函数的使用。 引用[5]给出了路由独享守卫的示例（beforeEnter）和组件内守卫的示例。 因此，我们将按照以下结构组织回答： 1. 导航守卫的概念和用途 2. 导航守卫的类型（全局、路由独享、组件内）及执行顺序 3. 每种守卫的使用方法及示例代码 4. 注意事项（如next函数的使用） 注意：在示例代码中，我们将使用Vue 2或Vue 3的语法（因为Vue 3中Composition API的使用方式不同，但选项式API的守卫写法相同），但重点放在选项式API，因为这是通用的。 另外，根据引用[4]，我们还可以提供一个简单的实现页面跳转路由守卫的例子（三个页面：首页、关于、登录）。 最后，生成相关问题。</think>### Vue 路由导航守卫详解 路由导航守卫是 Vue Router 提供的核心功能，用于在路由跳转前后执行自定义逻辑（如权限验证、数据预加载、页面追踪等）。根据作用范围可分为三类： --- #### 一、导航守卫类型与执行顺序 1. **全局守卫**（作用于所有路由） - `beforeEach`：路由跳转前触发 - `beforeResolve`：路由解析完成后触发 - `afterEach`：路由跳转完成后触发 2. **路由独享守卫**（作用于特定路由） - `beforeEnter`：进入特定路由前触发 3. **组件内守卫**（作用于单个组件） - `beforeRouteEnter`：进入组件前触发 - `beforeRouteUpdate`：路由参数变化时触发 - `beforeRouteLeave`：离开组件前触发 **执行顺序**： 全局 `beforeEach` → 路由独享 `beforeEnter` → 组件内 `beforeRouteEnter` → 全局 `beforeResolve` → 全局 `afterEach` --- #### 二、使用方法与代码示例 ##### 1. 全局守卫（`router/index.js`） ```javascript const router = new VueRouter({ ... }) // 路由跳转前验证 router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated()) { next('/login') // 重定向到登录页 } else { next() // 放行 } }) // 路由跳转后记录访问日志 router.afterEach((to) => { logVisit(to.path) // 自定义日志函数 }) ``` ##### 2. 路由独享守卫（路由配置中） ```javascript const routes = [ { path: '/admin', component: AdminPanel, beforeEnter: (to, from, next) => { // 管理员权限检查 if (getUserRole() !== 'admin') { next('/403') // 无权限页面 } else { next() } } } ] ``` ##### 3. 组件内守卫（`.vue` 文件中） ```vue <script> export default { beforeRouteEnter(to, from, next) { // 组件实例未创建，可通过回调访问 next(vm => { vm.loadData(to.params.id) // 初始化数据 }) }, beforeRouteUpdate(to, from, next) { // 路由参数变化时（如 /user/1 → /user/2） this.refreshData(to.params.id) next() }, beforeRouteLeave(to, from, next) { // 离开前确认（如未保存的表单） if (this.hasUnsavedChanges) { const confirm = window.confirm('确定离开？更改将丢失') next(confirm) // 确认则放行 } else { next() } } } </script> ``` --- #### 三、核心参数说明 | 参数 | 描述 | 可用范围 | |---------|-------------------------------|-----------------------| | `to` | 目标路由对象（包含path/params等） | 所有守卫 | | `from` | 来源路由对象 | 所有守卫 | | `next` | 控制跳转的函数 | 除afterEach外的所有守卫 | **`next()` 函数用法**： - `next()`：正常跳转 - `next(false)`：中断当前导航 - `next('/login')`：重定向到新路径 - `next(error)`：触发路由错误（进入错误回调） --- #### 四、典型应用场景 1. **身份验证** 全局守卫检查登录状态： ```javascript router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !store.state.isLoggedIn) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } }) ``` 2. **权限控制** 路由独享守卫验证角色： ```javascript beforeEnter: (to, from, next) => { const allowedRoles = to.meta.roles || [] if (!allowedRoles.includes(user.role)) next('/403') else next() } ``` 3. **数据预加载** 组件守卫提前获取数据： ```javascript beforeRouteEnter(to, from, next) { api.fetchData(to.params.id).then(data => { next(vm => vm.setData(data)) }) } ``` 4. **页面离开确认** 阻止用户意外离开： ```javascript beforeRouteLeave(to, from, next) { this.unsavedChanges ? next(confirm('离开？')) : next() } ``` --- #### 五、注意事项 1. **确保调用 `next()`** 每个守卫必须调用 `next()`，否则导航将挂起 2. **组件内守卫的 `this` 访问** `beforeRouteEnter` 中无法直接访问 `this`，需通过回调： ```javascript next(vm => { // 此处可访问组件实例 vm }) ``` 3. **避免无限循环** 重定向时确保跳转条件有退出机制： ```javascript // 错误示例：未登录时无限重定向到登录页 if (!isLoggedIn) next('/login') // 正确示例：排除登录页本身 if (!isLoggedIn && to.path !== '/login') next('/login') ``` > 导航守卫为SPA提供了精细的路由控制能力，合理使用可显著提升应用的安全性和用户体验[^3][^5]。 --- ### 常见问题解答 **Q：如何在导航守卫中获取Vuex状态？** A：在全局守卫中直接导入store： ```javascript import store from '@/store' router.beforeEach((to, from, next) => { if (store.state.user.token) { ... } }) ``` **Q：异步操作会阻塞导航吗？** A：会！需在异步操作完成后调用 `next()`： ```javascript beforeRouteEnter(to, from, next) { fetchData().then(() => next()) // 数据获取完成后放行 } ``` **Q：路由元信息(meta)如何使用？** A：在路由配置中添加自定义字段： ```javascript { path: '/dashboard', meta: { requiresAuth: true, roles: ['admin'] } } // 守卫中通过 to.meta 访问 ```