Vue 的路由钩子函数/路由守卫有哪些？
最新回答
薄荷糖味的吻
2026-10-20 14:58:25
Vue Router 的路由钩子函数/路由守卫分为全局、路由级别和组件级别三类，用于在路由跳转过程中控制页面行为。以下是详细分类及示例：
1. 全局路由守卫通过 router 对象设置，作用于所有路由跳转。
（1）beforeEach- 触发时机：路由跳转前执行。
- 用途：权限验证、登录状态检查等。
- 示例：router.beforeEach((to, from, next) => { console.log("全局前置守卫触发"); const isLogin = localStorage.getItem('token'); if (to.meta.requireAuth && !isLogin) { next({ path: '/login', query: { redirect: to.fullPath } }); } else { next(); // 放行 }});
- 触发时机：路由跳转完成后执行（无 next 参数）。
- 用途：页面标题修改、埋点统计等。
- 示例：router.afterEach((to, from) => { document.title = to.meta.title || '默认标题';});
在单个路由配置中定义，仅作用于该路由。
beforeEnter- 触发时机：进入指定路由前执行。
- 用途：特定路由的权限控制。
- 示例：{ path: '/admin', component: Admin, beforeEnter: (to, from, next) => { if (localStorage.getItem('role') === 'admin') { next(); } else { next('/403'); // 无权限跳转 } }}
在组件内部定义，与组件生命周期绑定。
（1）beforeRouteEnter- 触发时机：组件被渲染前（此时组件实例未创建，无法访问 this）。
- 用途：获取异步数据。
- 示例：export default { beforeRouteEnter(to, from, next) { fetchData().then(data => { next(vm => vm.data = data); // 通过回调访问组件实例 }); }};
- 触发时机：路由参数变化但组件复用时（如 /user/1 → /user/2）。
- 用途：重新获取数据。
- 示例：export default { beforeRouteUpdate(to, from, next) { this.fetchUser(to.params.id); next(); }};
- 触发时机：离开组件所在路由时。
- 用途：表单未保存提醒。
- 示例：export default { beforeRouteLeave(to, from, next) { if (this.formDirty) { confirm('未保存数据，确认离开？') ? next() : next(false); } else { next(); } }};
- 全局守卫：beforeEach（前置）、afterEach（后置）。
- 路由独享守卫：beforeEnter（配置在路由中）。
- 组件内守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。
通过合理使用这些钩子，可以实现权限控制、数据预加载、导航确认等精细化路由管理，提升用户体验。
热门标签
