Vue中的路由导航守卫有哪些？它们的执行顺序是什么？

在 Vue 中，有以下三种路由导航守卫：

• 全局守卫：
  • router.beforeEach：在进入每个路由之前执行。回调函数中有三个参数，to表示进入到哪个路由，from表示从哪个路由离开，next是一个函数，用于决定是否展示要看到的路由页面。
  • router.afterEach：在离开每个路由之后执行。回调函数中有两个参数，to表示进入到哪个路由，from表示从哪个路由离开。
• 组件内的守卫：
  • beforeRouteEnter：在进入组件时执行。回调函数中有三个参数，to和from参数的含义与全局守卫中的一致，next回调函数略有不同。如果直接以beforeRouteEnter进行访问，会发现alert输出hello undefined，这是因为在执行完之前，data数据还未渲染。所以，next会给一个对应的回调，帮助完成。
  • beforeRouteLeave：在离开组件时执行。如果确认离开，执行next()；如果取消，执行next(false)，留在当前页面。
• 路由独享的守卫：
  • beforeEnter：用法与全局守卫一致。

执行顺序如下：

1. 全局守卫的router.beforeEach。
2. 路由独享的守卫的beforeEnter。
3. 组件内的守卫的beforeRouteEnter。
4. 全局守卫的router.afterEach。
5. 组件内的守卫的beforeRouteLeave。
6. 路由独享的守卫的beforeEnter。