vue3 路由守卫 使用

### 实现和使用 Vue 3 中的路由守卫 在 Vue 3 中，路由守卫提供了一种机制来控制和管理路由跳转，在导航发生之前或之后执行某些逻辑处理。这种特性增强了应用程序的安全性和用户体验。 #### 全局前置守卫 全局前置守卫会在每次路由切换前被调用，适用于需要在整个应用范围内统一处理的情况。定义如下： ```javascript const router = createRouter({ history: createWebHistory(), routes, }); router.beforeEach((to, from, next) => { console.log('Navigating from ' + from.path + ' to ' + to.path); // 执行一些操作... next(); // 确保总是要调用next()以继续导航流程[^2] }); ``` #### 路由独享守卫 对于特定路由而言，可以在其配置项中指定`beforeEnter`钩子，这样只有当访问该路由时才会触发相应的守卫逻辑。 ```javascript { path: '/special', component: SpecialComponent, beforeEnter: (to, from, next) => { // 只有在这个路由下才生效的守卫逻辑 if (!isAuthenticated()) { next('/login'); // 如果未认证则重定向到登录页 } else { next(); } }, } ``` #### 组件内的守卫 组件内部也可以定义自己的守卫方法，这些方法仅对该组件实例有效。常见的三种生命周期钩子分别是 `beforeRouteEnter`, `beforeRouteUpdate`, 和 `beforeRouteLeave`. - **beforeRouteEnter**: 当进入新页面时触发，此时无法获取this指向因为组件还未创建。 ```javascript export default { beforeRouteEnter(to, from, next) { // 这里不能访问 this next(vm => { vm.fetchData(); // 数据预取或其他初始化工作 }); }, }; ``` - **beforeRouteUpdate**: 当当前路由改变但是该组件被复用时触发（即同一个组件对应多个不同参数），可用于更新组件状态而无需重新渲染整个组件。 ```javascript export default { beforeRouteUpdate(to, from, next) { this.message = to.params.id; next(); }, }; ``` - **beforeRouteLeave**: 用户尝试离开当前页面时触发，常用于确认是否保存更改等提示信息。 ```javascript export default { beforeRouteLeave(to, from, next) { const answer = window.confirm('Do you really want to leave? You have unsaved changes!'); if (answer) { next(); } else { next(false); // 阻止导航 } }, }; ``` 通过合理运用上述不同类型路由守卫，开发者可以根据实际需求灵活地定制化用户的浏览体验并加强安全性措施[^3]。