Vue路由守卫

### Vue.js 跆由守卫使用指南及示例 Vue.js 的路由守卫主要用于在导航过程中执行一些逻辑，例如权限验证、页面跳转等。根据作用范围的不同，路由守卫可以分为全局守卫、路由独享守卫和组件内守卫。 #### 1. 全局守卫 全局守卫适用于整个应用的路由切换过程。Vue Router 提供了 `beforeEach` 和 `afterEach` 两种类型的全局守卫。 - **全局前置守卫 (`beforeEach`)** 在每次路由切换前触发，可以用于权限校验或加载数据。如果需要阻止导航，可以通过调用 `next(false)` 或传入目标路径来实现。 ```javascript router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated()) { // 检查是否需要登录 next('/login'); // 如果未登录，则重定向到登录页 } else { next(); // 继续导航 } }); ``` - **全局后置守卫 (`afterEach`)** 在每次路由切换完成后触发，通常用于记录日志或更改页面标题等操作。 ```javascript router.afterEach((to, from) => { document.title = to.meta.title || 'Default Title'; // 动态设置页面标题[^2] }); ``` #### 2. 路由独享守卫 路由独享守卫仅对特定路由生效，可以在路由配置中通过 `beforeEnter` 属性定义。 ```javascript const routes = [ { path: '/admin', component: AdminComponent, beforeEnter: (to, from, next) => { if (!isAdminUser()) { // 检查用户是否为管理员 next({ name: 'unauthorized' }); // 如果不是管理员，重定向到无权访问页 } else { next(); // 继续导航 } } } ]; ``` #### 3. 组件内守卫 组件内守卫是定义在路由组件内部的守卫，主要用于处理与组件相关的逻辑。 - **`beforeRouteEnter`** 在导航进入该组件时调用。此时组件实例还未创建，因此无法访问 `this`，但可以通过回调函数访问组件实例。 ```javascript export default { beforeRouteEnter(to, from, next) { next(vm => { console.log('进入组件时触发', vm); // 访问组件实例 }); } } ``` - **`beforeRouteUpdate`** 在当前路由改变，但该组件被复用时调用。可以用于更新组件状态。 ```javascript export default { beforeRouteUpdate(to, from, next) { this.message = to.params.message; // 更新组件中的消息 next(); } } ``` - **`beforeRouteLeave`** 在离开该组件对应的路由时调用。可以用于确认导航行为。 ```javascript export default { beforeRouteLeave(to, from, next) { const answer = window.confirm('你确定要离开吗？'); // 确认对话框 if (answer) { next(); // 用户确认离开 } else { next(false); // 阻止离开 } } } ``` --- ### 注意事项 - `next()` 函数必须在守卫中调用，否则导航会被挂起。 - 守卫中的异步操作（如 API 请求）可以通过返回 `Promise` 来处理[^3]。 ---