路由前置守卫router.beforeEach相关用法

router.beforeEach 是 Vue Router 提供的全局前置守卫，用于在路由切换之前执行一些逻辑。该守卫接收三个参数：

1. to: 即将要进入的目标路由对象。
2. from: 当前导航正要离开的路由。
3. next: 一个函数，用于 resolve 钩子。调用 next 表示路由可以继续执行。

基本用法如下：

router.beforeEach((to, from, next) => {
  // 在路由切换之前执行的逻辑
  // ...

  // 调用 next() 表示路由可以继续执行
  next();
});

在 beforeEach 钩子中，可以进行一些权限判断、重定向、取消导航等操作。以下是一些常见的用法：

1. 权限判断：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    // 跳转到登录页
    next('/login');
  } else {
    // 继续执行下一个钩子
    next();
  }
});

2. 重定向：

router.beforeEach((to, from, next) => {
  if (to.path === '/old-path') {
    // 重定向到新路径
    next('/new-path');
  } else {
    next();
  }
});

3. 取消导航：

router.beforeEach((to, from, next) => {
  if (shouldCancelNavigation()) {
    // 取消当前导航
    next(false);
  } else {
    next();
  }
});

4. 异步处理：

router.beforeEach(async (to, from, next) => {
  // 异步操作，如请求用户信息
  const user = await fetchUserInfo();

  if (user) {
    // 用户信息存在，继续导航
    next();
  } else {
    // 用户信息不存在，取消导航或重定向
    next('/login');
  }
});

这些只是 beforeEach 的基本用法，你可以根据实际需求进行更复杂的操作。注意，在 beforeEach 钩子中需要调用 next 来继续执行后续钩子，否则路由会被中断。