vue3 路由导航守卫的使用

Vue3 的路由导航守卫与 Vue2 的路由导航守卫使用方法基本一致，但是在 Vue3 中使用守卫需要注意一些细节。

1. 全局守卫

在创建路由实例时，可以通过 `beforeEach`、`beforeResolve`、`afterEach` 方法来定义全局的路由导航守卫。

import { createRouter, createWebHistory } from 'vue-router'

const routerHistory = createWebHistory()

const router = createRouter({
  history: routerHistory,
  routes: [
    // ...
  ]
})

router.beforeEach((to, from, next) => {
  // 在进入路由前做一些处理
  next()
})

router.afterEach(() => {
  // 在路由完成后做一些处理
})

export default router

2. 路由独享守卫

在定义路由时，可以通过 `beforeEnter` 方法来定义该路由的独享守卫。

const routes = [
  {
    path: '/foo',
    component: Foo,
    beforeEnter: (to, from, next) => {
      // 在进入该路由前做一些处理
      next()
    }
  },
  // ...
]

3. 组件内守卫

在组件内，可以通过 `beforeRouteEnter`、`beforeRouteUpdate`、`beforeRouteLeave` 方法来定义组件内的路由导航守卫。

export default {
  // 在组件进入路由前做一些处理
  beforeRouteEnter(to, from, next) {
    // 在组件未创建前，this 指向的是 undefined，因此无法访问组件实例。
    // 可以通过回调函数来访问组件实例。
    next(vm => {
      // 可以通过 vm 访问组件实例
    })
  },
  // 在组件更新路由前做一些处理
  beforeRouteUpdate(to, from, next) {
    // 可以通过 this 访问组件实例
    // 在组件更新时，组件实例已经存在，因此可以直接访问组件实例
    next()
  },
  // 在组件离开路由前做一些处理
  beforeRouteLeave(to, from, next) {
    // 可以通过 this 访问组件实例
    // 在组件离开路由时，组件实例仍然存在，因此可以直接访问组件实例
    next()
  }
}

注意事项：

1. 在 `beforeRouteEnter` 中，访问不到组件实例，需要通过回调函数来访问组件实例。
2. 在 `beforeRouteUpdate` 和 `beforeRouteLeave` 中，可以直接通过 `this` 访问组件实例。