以下是 Vue 路由导航守卫的一些关键钩子函数：
全局前置守卫 (beforeEach)：
在路由切换前调用。常用于进行全局的身份验证、权限检查等。如果没有调用 next()，则路由不会发生切换。
router.beforeEach((to, from, next) => { // 进行权限检查等操作 if (/* 条件满足 */) { next(); // 允许路由切换 } else { next(false); // 阻止路由切换 } });
全局解析守卫 (beforeResolve)：
在所有异步组件被解析之后调用，且在 beforeRouteEnter 守卫之前调用。
router.beforeResolve((to, from, next) => { // 所有异步组件解析完毕后执行 next(); });
全局后置守卫 (afterEach)：
在路由切换后被调用。常用于页面切换后的一些清理工作或埋点等操作。
router.afterEach((to, from) => { // 页面切换后的操作 });
const routes = [ { path: '/admin', component: Admin, beforeEnter: (to, from, next) => { // 路由独享的守卫 // 比如权限检查 next(); } } ];
组件内的守卫：
在组件内部使用 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 定义组件内的导航守卫。
export default { beforeRouteEnter(to, from, next) { // 在进入组件前调用 // 可以获取组件实例 this next(); },
beforeRouteUpdate(to, from, next) { // 在组件复用时调用（参数变化） // 可以获取组件实例 this next(); },
beforeRouteLeave(to, from, next) { // 在离开组件前调用 // 可以获取组件实例 this next(); } };
这些导航守卫可以帮助你在路由切换的不同阶段执行逻辑，以确保你的应用在导航时具有所需的行为。根据实际需求，你可以选择在全局守卫、路由独享守卫或组件内守卫中使用不同的钩子函数。
