Vue.js 中的路由导航守卫是 Vue Router 提供的一套机制，用于在路由切换的过程中执行自定义代码逻辑，包括但不限于权限验证、页面滚动位置保存、加载数据等。它分为三种类型：
- 全局前置守卫 (Global beforeEach Guard)
全局前置守卫应用在整个应用程序的路由跳转之前，不论你访问任何路由都会触发。注册全局前置守卫通过调用 router.beforeEach 方法，并传入一个回调函数。这个回调函数接收三个参数：
to: Route: 即将要进入的目标路由对象。
from: Route: 当前导航正要离开的路由对象。
next: Function: 调用该函数进行下一步操作。它可以接受一个可选的参数（通常是一个错误对象），决定是否以及如何继续导航流程。
import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes';const router = createRouter({history: createWebHistory(),routes,
});router.beforeEach((to, from, next) => {// 在这里可以执行异步操作，例如检查用户登录状态if (!isAuthenticated) {next('/login');} else {next();}
});
- 全局解析守卫 (Global afterEach Guard)
除了前置守卫，Vue Router 还提供了全局后置守卫 (router.afterEach)，这个守卫会在每次导航完成，即将激活组件渲染之后触发，但不涉及阻止或更改导航过程。
router.afterEach((to, from) => {// 可以在这里记录路由历史、页面浏览统计等操作
});
- 路由独享守卫 (Per-Route Guard)
可以在单个路由配置中定义前置守卫和/或后置守卫，这些守卫仅针对特定路由生效：
{path: '/admin',component: AdminPanel,beforeEnter: (to, from, next) => {// 执行特定于 /admin 路由的权限检查或其他操作if (canAccessAdmin()) {next();} else {next({ name: 'access-denied' });}},
}
- 组件内的守卫 (In-Component Guards)
在单个路由组件内，有三种类型的守卫：
beforeRouteEnter: 组件实例还未创建时就已存在的守卫，不能直接访问组件实例，可以通过 next(vm => {}) 访问组件实例并传递给回调函数。
export default {beforeRouteEnter(to, from, next) {next(vm => {vm.title = to.meta.title; // 设置组件标题});},
};
beforeRouteUpdate: 当路由的 params 或 query 发生变化（即当前路由路径不变，只有参数变化）时触发，此时可以直接访问组件实例。
export default {beforeRouteUpdate(to, from, next) {this.loadData(to.params.id); // 更新组件数据next();},
};
beforeRouteLeave: 导航离开当前路由时触发，可以用来确认是否允许离开。
export default {data() {return {unsavedChanges: false,};},methods: {confirmNavigation() {// 用户确认逻辑...},},beforeRouteLeave(to, from, next) {if (this.unsavedChanges) {this.confirmNavigation().then(() => next()).catch(() => next(false));} else {next();}},
};
)
（九）)
)
