vue-router钩子函数

### Vue Router 钩子函数概述 Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA），其中钩子函数（也称为导航守卫）是非常重要的功能之一。它们允许开发者在导航过程中执行自定义逻辑，比如权限校验、数据预取等。 以下是 Vue Router 中常见的几种类型的钩子函数以及其使用方法： --- #### 1. **全局前置守卫 (`beforeEach`)** 该钩子会在每次路由跳转之前触发，适用于整个应用程序范围的拦截操作，例如登录状态验证。 ```javascript router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated()) { next('/login'); // 如果未认证，则重定向到登录页 } else { next(); // 否则继续导航 } }); ``` 此代码片段展示了如何通过 `meta` 字段判断目标路由是否需要身份验证[^1]。 --- #### 2. **全局解析守卫 (`beforeResolve`)** 类似于 `beforeEach`，但它是在导航被确认之后，但在组件渲染之前调用。适合处理依赖于异步数据获取的情况。 ```javascript router.beforeResolve((to, from, next) => { const asyncDataLoaded = loadAsyncData(to.params.id); if (!asyncDataLoaded) { next(false); // 停止导航直到数据加载完成 } else { next(); } }); ``` 上述例子说明了当某些条件不满足时暂停导航的过程[^5]。 --- #### 3. **全局后置钩子 (`afterEach`)** 这个钩子不会接收 `next` 函数也不会改变导航本身，主要用于记录日志或者更改页面标题之类的副作用操作。 ```javascript router.afterEach((to, from) => { document.title = to.meta.title || 'Default Title'; }); ``` 这里演示了一个简单的设置网页标题的例子[^2]。 --- #### 4. **路由独享守卫 (`beforeEnter`)** 针对某个具体的路由配置单独使用的守卫，通常用来简化复杂的业务逻辑分配。 ```javascript const routes = [ { path: '/admin', component: Admin, beforeEnter: (to, from, next) => { isAdmin() ? next() : next('/'); }, }, ]; ``` 上面这段脚本检查用户是否有管理员权限再决定是否进入指定路径[^3]。 --- #### 5. **组件内的守卫** ##### a. `beforeRouteEnter` 特殊之处在于无法直接访问当前组件实例(`this`)，但是可以通过传递回调给 `next` 来间接获得。 ```javascript export default { beforeRouteEnter(to, from, next) { next(vm => { console.log('Component instance:', vm); }); }, }; ``` 注意这里的 `vm` 参数代表的就是即将挂载好的组件实例对象[^4]。 ##### b. `beforeRouteUpdate` 仅限于同一个组件重新渲染期间有效，即 params 或 query 发生变化但保持同一组件不变的情况下适用。 ```javascript export default { data() { return { msg: '' }; }, beforeRouteUpdate(to, from, next) { this.msg = to.params.message; next(); }, }; ``` 此处更新消息变量以反映新的路由参数值。 ##### c. `beforeRouteLeave` 离开当前视图前运行，可用于提示保存工作进度或其他清理动作。 ```javascript export default { beforeRouteLeave(to, from, next) { const answer = window.confirm('Do you really want to leave?'); if (answer) { next(); } else { next(false); } }, }; ``` 以上示例询问用户是否真的要退出当前界面。 --- ### 总结 Vue Router 提供多种方式让开发者能够精确控制用户的浏览行为，无论是整体性的还是局部特化的场景都能找到合适的解决方案。合理运用这些钩子不仅可以增强用户体验还能提高程序的安全性和稳定性。