关于vue-router的钩子函数（vue知识点/面试题）

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