vue-router拦截器

在 Vue 项目中，vue-router 的路由拦截器和组件内部的路由拦截器（如 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）虽然都能拦截路由，但它们的作用范围和使用场景有所不同。下面是二者的区别总结：

1. 全局路由拦截器 (vue-router 的 beforeEach 和 afterEach)

使用位置：

• 全局路由拦截器是定义在 vue-router 实例上，通常在 router/index.js 中使用。

作用范围：

• 作用于整个路由系统，对所有路由的跳转生效。无论跳转到哪个页面、组件，都会触发全局的路由守卫。

使用场景：

• 全局权限控制：如用户是否登录、权限校验、全局的页面跳转限制等。
• 跳转前后的全局逻辑：如在跳转之前弹出确认框、或者在跳转成功后做一些全局的处理（如页面滚动恢复、统计埋点等）。

主要函数：

• beforeEach: 在每次路由跳转前执行。
• afterEach: 在路由跳转完成后执行。

示例：

// router/index.js
router.beforeEach((to, from, next) => {// 判断是否需要登录权限if (to.meta.requiresAuth && !isLoggedIn()) {next('/login'); // 如果未登录，跳转到登录页面} else {next(); // 否则放行}
});router.afterEach((to, from) => {// 路由跳转后执行，比如做一些埋点统计
});

2. 组件内部的路由拦截器 (beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave)

使用位置：

• 这些拦截器是定义在具体的 Vue 组件内部，作为组件的路由守卫。

作用范围：

• 只作用于当前组件的路由，即只有在当前组件对应的路由被访问时，才会触发这些守卫。

使用场景：

• 组件级的特定逻辑处理：当路由进入、更新或离开当前组件时，需要处理的逻辑，比如在组件加载前检查数据、在组件离开时确认是否保存未提交的数据等。

主要函数：

• beforeRouteEnter: 在进入该组件对应的路由之前触发。在这个钩子中无法访问 this，但可以通过传递回调函数访问组件实例。
• beforeRouteUpdate: 当路由参数发生变化（但仍在当前组件内）时触发。
• beforeRouteLeave: 当离开该组件对应的路由时触发，常用于用户离开页面前的确认操作。

示例：

export default {name: 'MyComponent',// 进入路由之前beforeRouteEnter(to, from, next) {console.log('beforeRouteEnter - 即将进入组件路由');// 可以通过 next 的回调访问组件实例next(vm => {// 可以在这里访问 `vm` 组件实例，进行相关操作vm.initData();});},// 当路由参数变化时（比如 ID 变化），但组件没有销毁时beforeRouteUpdate(to, from, next) {console.log('beforeRouteUpdate - 路由参数更新');this.fetchData(to.params.id);next();},// 离开路由之前beforeRouteLeave(to, from, next) {console.log('beforeRouteLeave - 即将离开组件路由');// 可以提示用户是否要离开，比如是否保存表单if (this.hasUnsavedChanges) {const answer = window.confirm('你确定要离开吗？未保存的更改将丢失。');if (!answer) next(false);else next();} else {next();}}
};

3. 两者的区别对比

方面	全局路由拦截器 (vue-router)	组件内的路由拦截器
定义位置	在 router/index.js 或 vue-router 实例中	具体的 Vue 组件内部
作用范围	全局作用，拦截所有路由	只拦截当前组件的路由
使用场景	全局权限控制、登录验证、全局跳转逻辑	处理组件内的路由变化，如数据获取或保存提示
常用函数	beforeEach, afterEach	beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
对组件实例的访问	不能直接访问组件实例，需传递回调	可以直接访问组件实例，进行组件内操作
影响的路由跳转	全局跳转前、跳转后	进入、更新、离开当前组件时触发

总结：

• 全局路由拦截器 更适合处理全局的路由权限控制、登录验证和全局跳转逻辑等。
• 组件内的路由拦截器 更适合处理与组件本身相关的逻辑，比如在进入页面前加载数据、用户离开页面时进行提示等。

根据你的需求来选择使用全局或组件内的路由拦截器。