7个 Vue 路由守卫的执行顺序
大家好，我是大澈！一个喜欢结交朋友的老程序员👨🏻💻，关注我，科技未来或许我能帮到你！
我们都知道，Vue Router 提供了 3 类路由守卫，用于在路由跳转时进行拦截、验证或执行其他逻辑。
那它们的执行顺序你了解吗？
下面按从路由 A 切换到路由 B 的思路，对这 7 个路由守卫的执行顺序和作用，进行拆解！
一、beforeRouteLeave
当你离开当前页面时，如果页面组件中定义了 beforeRouteLeave 钩子，它会首先被调用。
作用：用来确认离开当前页面前是否需要执行一些操作，比如提醒用户保存未提交的数据。
二、beforeEach
离开组件的钩子执行完后，全局注册的 router.beforeEach 将被调用。
作用：在所有路由跳转中统一拦截，如验证用户是否登录或具备访问权限。
三、beforeEnter
接着，目标路由配置中专门设置的 beforeEnter 钩子会执行。
作用：只针对特定路由进行拦截与处理，比如判断某个页面是否只允许管理员访问。
四、beforeRouteUpdate
如果目标路由使用的是同一个组件（组件复用的情况），组件内的 beforeRouteUpdate 会被调用。
作用：当路由参数发生变化时，用来更新组件内部的数据，而不需要重新创建组件实例。
五、beforeRouteEnter
对于即将进入的新组件，beforeRouteEnter 钩子将执行，此时组件实例尚未创建，因此无法直接通过 this 访问。
作用：可以在进入页面前执行一些异步操作（如数据预加载），并通过回调函数在组件实例创建后执行后续逻辑。
六、beforeResolve
当上述所有路由和组件级别的守卫都执行完毕后，最后执行全局的 router.beforeResolve。
作用：做一些最后的检查或数据准备，确保所有前置逻辑都已完成再进行页面跳转。
七、afterEach
导航确认完成后，全局的 router.afterEach 钩子会被调用。
作用：执行一些不影响导航流程的后置操作，比如记录页面访问日志或触发页面动画。
好了，今天要分享的内容就是这么多，联系和更多内容在绿色App搜【程序员大澈】，最后感谢朋友们给个点赞、分享、推荐，拜拜~