vue的路由守卫详解

路由的导航守卫 又叫做路由的钩子函数（生命周期函数） 就是在跳转页面的时候把路由栏下来，做一些操作在放行，vue一共提供了三种路由守卫。 第一种是全局守卫 beforeEach路由进入之前

Vue路由守卫是一种机制，用于在导航到路由或从路由导航时执行异步函数或条件检查。它们允许您在路由导航发生之前或之后拦截它并按需执行代码。Vue Router提供了全局守卫、路由独享的守卫和组件内的守卫。常见的路由守卫包括：beforeEach、afterEach、beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave。
​
Vue 路由守卫是一种可以在路由改变的时候执行的函数，可以用来控制访问权限、重定向、登录验证等操作。Vue 路由提供了全局路由守卫、路由独享守卫和组件内守卫三种类型的守卫。
1. 全局路由守卫：
全局路由守卫是在路由配置中定义的，会在所有路由切换时都被调用。全局路由守卫包括 `beforeEach`、`beforeResolve` 和 `afterEach` 三种。
- `beforeEach`: 在路由切换之前调用，可以用来做访问权限控制或者重定向等操作。
- `beforeResolve`: 在路由切换时异步组件加载完成之后调用，也可以用来做访问权限控制等操作。
- `afterEach`: 在路由切换之后调用，可以用来做页面滚动、页面统计等操作。
2. 路由独享守卫：
路由独享守卫是在路由配置中单独定义的，在该路由被访问时被调用。路由独享守卫包括 `beforeEnter`。
- `beforeEnter`: 和 `beforeEach` 类似，但只作用于单个路由。
3. 组件内守卫：
组件内守卫是在组件内定义的，可以用来控制组件的访问权限。组件内守卫包括 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave` 三种。
- `beforeRouteEnter`: 在路由进入组件之前调用，可以用来做组件缓存、访问权限控制等操作。
- `beforeRouteUpdate`: 在路由更新组件之前调用，可以用来做组件缓存、数据更新等操作。
- `beforeRouteLeave`: 在路由离开组件之前调用，可以用来做数据保存、访问权限控制等操作。
通过使用路由守卫，我们可以更加灵活地控制页面的访问权限和行为，提高应用程序的安全性和用户体验。