Vue 路由守卫使用文档

一、概述 Vue 路由守卫是 Vue Router 提供的一种机制，用于在路由导航过程中对路由进行控制和过滤。通过使用路由守卫，我们可以在路由跳转前、跳转后以及跳转过程中执行一些自定义的逻辑。

二、路由守卫的类型 Vue 路由守卫主要分为全局守卫、路由独享守卫和组件内守卫三种类型。

1. 全局守卫 全局守卫会在路由导航的每个阶段都被调用，包括路由跳转前、跳转后以及跳转过程中。

• beforeEach(to, from, next) 在路由跳转前被调用，可以用于进行权限验证、登录状态判断等操作。to 参数表示即将进入的路由对象，from 参数表示当前导航正要离开的路由对象，next 函数用于进行路由的跳转。
• afterEach(to, from) 在路由跳转后被调用，可以用于进行页面统计、日志记录等操作。to 参数表示即将进入的路由对象，from 参数表示当前导航正要离开的路由对象。

2. 路由独享守卫 路由独享守卫只会在特定的路由上被调用。

• beforeEnter(to, from, next) 在路由进入前被调用，可以用于进行特定路由的权限验证、登录状态判断等操作。to 参数表示即将进入的路由对象，from 参数表示当前导航正要离开的路由对象，next 函数用于进行路由的跳转。

3. 组件内守卫 组件内守卫只会在当前组件内被调用。

• beforeRouteEnter(to, from, next) 在路由进入前被调用，可以用于进行当前组件的初始化操作。to 参数表示即将进入的路由对象，from 参数表示当前导航正要离开的路由对象，next 函数用于进行路由的跳转。
• beforeRouteUpdate(to, from, next) 在当前路由改变，但是当前组件被复用时被调用。to 参数表示即将进入的路由对象，from 参数表示当前导航正要离开的路由对象，next 函数用于进行路由的跳转。
• beforeRouteLeave(to, from, next) 在路由离开前被调用，可以用于进行当前组件的销毁操作。to 参数表示即将进入的路由对象，from 参数表示当前导航正要离开的路由对象，next 函数用于进行路由的跳转。

三、使用示例

1. 全局守卫

router.beforeEach((to, from, next) => {
  // 权限验证、登录状态判断等操作
  if (to.meta.requireAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

router.afterEach((to, from) => {
  // 页面统计、日志记录等操作
});

2. 路由独享守卫

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 权限验证、登录状态判断等操作
        if (to.meta.requireAuth && !isAuthenticated()) {
          next('/login');
        } else {
          next();
        }
      }
    }
  ]
});

3. 组件内守卫

export default {
  beforeRouteEnter(to, from, next) {
    // 初始化操作
    fetchData().then(data => {
      next(vm => {
        vm.data = data;
      });
    });
  },
  beforeRouteUpdate(to, from, next) {
    // 组件被复用时的操作
    fetchData().then(data => {
      this.data = data;
      next();
    });
  },
  beforeRouteLeave(to, from, next) {
    // 组件销毁操作
    saveData(this.data).then(() => {
      next();
    });
  }
}

Vue 路由守卫可以在路由导航过程中对路由进行控制和过滤，实现权限验证、登录状态判断、页面统计、日志记录等功能。根据需要选择合适的守卫类型，并在相应的回调函数中编写自定义逻辑，从而实现更加灵活和可控的路由跳转。