Vue 2 中，Vue Router 提供了多个钩子函数（导航守卫）来控制路由的行为。这些钩子函数主要分为以下几类：

全局守卫（Global Guards）

beforeEach：在每次路由切换前被调用。常用于验证用户身份或权限。
afterEach：在每次路由切换后被调用，不接收 next 函数，常用于结束动画、日志记录等操作。
以下部分场景示例来源于：GPT4o

单个路由独享的守卫（Route Guards）

beforeEnter：在进入路由之前被调用。与 beforeEach 类似，但只作用于特定路由。
组件内的守卫（In-Component Guards）

组件内的守卫（In-Component Guards）

beforeRouteEnter：在路由进入前调用，不能直接访问 this，可通过传入的回调函数访问组件实例。
beforeRouteUpdate：在当前路由改变，但该组件被复用时调用。
beforeRouteLeave：导航离开该组件的路由时调用，常用于防止用户在未保存更改时离开。

场景示例

1.根据权限判断跳转不同页面（身份验证或权限控制），全局 beforeEach 守卫

router.beforeEach((to, from, next) => {const isAuthenticated = false; // 假设一个身份验证变量if (to.name !== 'Login' && !isAuthenticated) {next({ name: 'Login' }); // 跳转到登录页面} else {next(); // 继续导航}
});

2.路由独享 beforeEnter 守卫，用于特定路由的访问控制

const router = new VueRouter({routes: [{path: '/admin',component: AdminComponent,beforeEnter: (to, from, next) => {const isAdmin = false; // 假设一个管理员权限变量if (!isAdmin) {next('/'); // 跳转到主页} else {next(); // 允许进入}}}]
});

3.组件内 beforeRouteEnter 守卫，路由进入前执行异步操作

export default {// 组件配置beforeRouteEnter(to, from, next) {setTimeout(() => {next(vm => {vm.fetchData(); // 在实例创建后调用组件方法});}, 1000);},methods: {fetchData() {// 模拟获取数据console.log('Fetching data...');}}
};

4.组件内 beforeRouteLeave 守卫，防止用户在未保存更改时离开页面

export default {data() {return {hasChanges: true // 假设用户有未保存的更改};},beforeRouteLeave(to, from, next) {if (this.hasChanges) {const answer = window.confirm('您有未保存的更改，确定要离开吗？');if (answer) {next(); // 允许离开} else {next(false); // 阻止导航}} else {next(); // 允许离开}}
};

以上部分场景示例来源于：GPT4o