vue3中使用路由守卫

在 Vue3 中，使用路由守卫可以通过 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave` 方法来实现。

1. `beforeRouteEnter`: 在进入路由前执行，可以获取组件实例、路由信息和回调函数。

const router = createRouter({
  routes: [
    {
      path: '/example',
      component: Example,
      beforeEnter: (to, from, next) => {
        // 执行一些逻辑操作
        next()
      }
    }
  ]
})

2. `beforeRouteUpdate`: 在当前路由更新时执行，可以获取组件实例和路由信息。

const Example = {
  template: `<div>{{ this.$route.params.id }}</div>`,
  beforeRouteUpdate (to, from, next) {
    // 执行一些逻辑操作
    next()
  }
}

3. `beforeRouteLeave`: 在离开当前路由前执行，可以获取组件实例和路由信息。

const Example = {
  template: `<div>{{ this.$route.params.id }}</div>`,
  beforeRouteLeave (to, from, next) {
    // 执行一些逻辑操作
    next()
  }
}

以上三个方法都接收三个参数：to、from 和 next。其中，to 表示即将进入的路由对象，from 表示即将离开的路由对象，next 是一个回调函数，用于进入下一个钩子或路由。如果需要终止路由导航，则可以在 next 方法中传入 false。

例如，下面的代码实现了一个登录路由守卫：

const router = createRouter({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/home',
      component: Home,
      meta: { requiresAuth: true }
    }
  ]
})

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

在上面的代码中，我们使用 `beforeEach` 方法来定义全局的路由守卫，检查用户是否已经登录。如果用户没有登录，则将其重定向到登录页面，并将当前路由的路径信息保存在 `query` 参数中。如果已经登录，则直接进入下一个路由。