vue路由守卫是什么

Vue 路由守卫是 Vue Router 提供的一种功能，用于在导航发生前、导航完成后或导航被取消时执行特定的操作。它主要用于权限控制、数据预加载、状态检查等场景。1、全局守卫、2、路由独享守卫和3、组件内守卫是 Vue 路由守卫的三种主要类型。

一、全局守卫

全局守卫是在整个应用的路由导航过程中执行的守卫，分为全局前置守卫和全局后置守卫。

全局前置守卫（beforeEach）：
- 语法：router.beforeEach((to, from, next) => {})
- 用途：在每次导航前执行，用于检查用户是否有权限访问目标路由。
- 示例：
```
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});
```
全局后置守卫（afterEach）：
- 语法：router.afterEach((to, from) => {})
- 用途：在每次导航后执行，用于进行一些清理操作或页面统计等。
- 示例：
```
router.afterEach((to, from) => {
  console.log('Navigation completed to:', to.path);
});
```

二、路由独享守卫

路由独享守卫是为特定路由定义的守卫，分为beforeEnter。

路由独享的 beforeEnter 守卫：

语法：在路由配置中定义beforeEnter
用途：在进入某个特定路由前执行，用于特定路由的权限检查或数据预加载。

示例：

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    beforeEnter: (to, from, next) => {
      if (isAuthenticated()) {
        next();
      } else {
        next('/login');
      }
    }
  }
];

三、组件内守卫

组件内守卫是定义在 Vue 组件内部的守卫，分为beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave。

beforeRouteEnter：

语法：在组件内定义beforeRouteEnter
用途：在进入组件对应的路由前执行，适用于组件初始化时需要的数据加载。

示例：

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 通过 vm 访问组件实例
      vm.loadData();
    });
  },
  methods: {
    loadData() {
      // 数据加载逻辑
    }
  }
};

beforeRouteUpdate：

语法：在组件内定义beforeRouteUpdate
用途：在当前路由改变但该组件被复用时执行，适用于更新组件数据。

示例：

export default {
  beforeRouteUpdate(to, from, next) {
    this.loadData();
    next();
  },
  methods: {
    loadData() {
      // 数据加载逻辑
    }
  }
};

beforeRouteLeave：

语法：在组件内定义beforeRouteLeave
用途：在离开组件对应的路由前执行，适用于确认用户是否保存更改等操作。

示例：

export default {
  beforeRouteLeave(to, from, next) {
    if (this.hasUnsavedChanges) {
      const answer = window.confirm('You have unsaved changes. Do you really want to leave?');
      if (answer) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  },
  data() {
    return {
      hasUnsavedChanges: false
    };
  }
};

四、具体应用场景与实例

权限控制：

通过路由守卫检查用户是否有权限访问某些页面。

示例：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

数据预加载：

在进入某个路由前加载所需的数据，以便在组件渲染时可以直接使用。

示例：

const routes = [
  {
    path: '/user/:id',
    component: User,
    beforeEnter: (to, from, next) => {
      store.dispatch('fetchUserData', to.params.id).then(() => {
        next();
      });
    }
  }
];

防止未保存的更改丢失：

在用户尝试离开当前页面时，提示用户是否确认离开，以防止未保存的更改丢失。

示例：

export default {
  beforeRouteLeave(to, from, next) {
    if (this.hasUnsavedChanges) {
      const answer = window.confirm('You have unsaved changes. Do you really want to leave?');
      if (answer) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  },
  data() {
    return {
      hasUnsavedChanges: false
    };
  }
};

五、最佳实践与注意事项

避免重复检查：
- 若多个路由需要相同的权限检查逻辑，建议使用全局守卫而不是在每个路由中重复定义独享守卫。
合理使用异步操作：
- 路由守卫中可以包含异步操作，但需要确保在操作完成后调用next()，否则导航会被挂起。
结合 Vuex 状态管理：
- 在复杂应用中，结合 Vuex 管理应用状态，可以更方便地在守卫中访问和操作全局状态。
用户体验优化：
- 在数据预加载场景中，可以显示加载动画或提示，以改善用户体验。
清理操作：
- 在全局后置守卫或组件内守卫中进行必要的清理操作，如取消订阅、清理定时器等。

总结与建议

Vue 路由守卫提供了灵活的方式来控制导航过程，使得在权限控制、数据预加载和用户交互等方面变得更加简单和高效。为了更好地利用路由守卫，建议遵循以下几点：

明确需求：根据具体需求选择合适的守卫类型。
避免重复：使用全局守卫来处理通用逻辑，减少代码重复。
用户体验：在异步操作和数据加载过程中，注意用户体验，提供适当的反馈。
合理设计：结合 Vuex 等状态管理工具，设计合理的状态和数据流。

通过合理使用 Vue 路由守卫，开发者可以创建更安全、流畅且用户友好的应用。