路由守卫在 vue router 中用于控制页面导航流程，主要有三种类型：1. 全局路由守卫，包括 beforeeach（用于权限检查）、aftereach（适合清理操作或埋点）和 beforeresolve（在组件内守卫之后调用），例如通过 beforeeach 判断用户是否登录以决定是否跳转至登录页；2. 单个路由独享守卫，在特定路由配置中使用 beforeenter 控制该路由的访问逻辑，如检查权限并决定是否跳转至禁止页面；3. 组件内守卫，包含 beforerouteenter（进入组件前调用）、beforerouteupdate（路由参数变化时重新获取数据）和 beforerouteleave（离开组件前提醒保存未提交数据），例如通过 beforerouteleave 防止用户误操作离开未保存的编辑页面。
在 Vue Router 中，路由守卫（Navigation Guards）是用于控制页面导航流程的一种机制。常见的路由守卫类型主要有三种：
1. 全局路由守卫（Global Guards）
全局路由守卫是在整个应用范围内生效的守卫。它们通常用于处理通用逻辑，比如权限验证、页面加载动画或日志记录。
- beforeEach：在路由跳转前执行，常用于权限检查。
- afterEach：在路由跳转完成后执行，适合做一些清理操作或者页面埋点。
-
beforeResolve：在导航被确认之前触发，和
beforeEach
类似，但会在所有组件内守卫和异步组件加载完毕之后调用。
举个例子，如果你需要判断用户是否登录才能访问某些页面，就可以在
beforeEach里做判断：
立即学习“前端免费学习笔记（深入）”；
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login'); // 跳转到登录页
} else {
next(); // 继续正常导航
}
});2. 单个路由独享守卫（Route-Specific Guards）
这类守卫是直接定义在某个特定路由配置中的钩子函数，只对这个路由起作用。虽然不常见，但在某些特殊场景下会比较方便。
可以使用
beforeEnter来实现：
{
path: '/dashboard',
component: Dashboard,
beforeEnter: (to, from, next) => {
if (checkAccess(to.params.id)) {
next();
} else {
next('/forbidden');
}
}
}这种方式适合一些只需要对单个路由做特别处理的情况，但维护多了容易分散逻辑，不太推荐广泛使用。
3. 组件内守卫（Component-Level Guards）
组件内守卫是在组件内部定义的导航钩子，用于控制当前组件是否允许进入、离开或更新。主要包含以下几个方法：
-
beforeRouteEnter：在进入该组件前调用，不能访问
this
，因为组件实例还未创建。 - beforeRouteUpdate：当路由参数变化但组件被复用时调用，适合重新获取数据。
- beforeRouteLeave：在离开该组件前调用，适合提醒用户保存未提交的数据。
举个例子，如果用户正在编辑表单，想防止误操作离开页面：
beforeRouteLeave(to, from, next) {
if (this.isFormDirty) {
if (confirm('你有未保存的内容，确定离开吗？')) {
next();
} else {
next(false); // 阻止导航
}
} else {
next();
}
}总的来说，这三类路由守卫各有用途，可以根据项目需求灵活搭配使用。全局守卫适合统一处理公共逻辑，组件内守卫更适合组件级别的控制，而路由独享守卫则适用于个别特殊情况。基本上就这些。
