Vue-router有哪几种路由守卫

Vue Router提供了多种路由守卫，用于控制路由的导航过程。这些守卫可以在不同的阶段对路由进行拦截和控制，以实现诸如权限验证、页面访问控制等功能。

以下是 Vue Router 中常用的路由守卫：

全局守卫

1. beforeEach：全局前置守卫，在路由切换之前被调用。可以用来进行全局的权限验证或其他前置操作。
2. beforeResolve：全局解析守卫，在导航被确认之前，所有组件内守卫和异步路由组件被解析之后调用。
3. afterEach：全局后置守卫，在路由切换完成后被调用。通常用于处理一些不改变组件实例的路由钩子，如页面滚动到顶部等。

路由独享的守卫

1. beforeEnter：直接在路由配置上定义的守卫，仅在进入该路由时被调用。

组件内的守卫

1. beforeRouteEnter：在路由进入之前，组件实例还未被创建时调用。此时无法访问 this，因为组件实例还未创建。
2. beforeRouteUpdate（2.2 新增）：在当前路由改变，但是该组件被复用时调用。可以访问组件实例 this。
3. beforeRouteLeave：在路由离开当前路由，组件实例还未销毁前调用。可以访问组件实例 this。

路由元信息

除了上述守卫，Vue Router 还允许你通过路由元信息（meta 字段）来定义每个路由的额外信息，这些信息可以在守卫中被访问，用于实现更复杂的路由控制逻辑。

使用场景

• 权限验证：使用 beforeEach 守卫来检查用户是否有权限访问某个页面。
• 页面访问控制：使用 beforeEnter 或 beforeRouteEnter 守卫来控制对特定路由的访问。
• 数据预取：使用 beforeRouteEnter 守卫来在路由进入前获取数据，并将数据传递给组件。
• 页面离开确认：使用 beforeRouteLeave 守卫来提示用户在离开页面时是否保存未保存的更改。

这些守卫提供了灵活的机制来控制路由的导航过程，使得开发者可以根据应用的需求来定制路由的行为。在实际开发中，合理地使用这些守卫可以大大提高应用的用户体验和安全性。