vue.3组件的路由守卫

Vue 3 中的组件路由守卫主要是为了提供对组件及其相关的URL路径进行控制的能力，它们通常在Vue Router中使用。有三种主要的路由守卫：

1. **全局前置守卫**（`beforeEach`）：这是在每个导航尝试之前运行的一组钩子。你可以在这里做认证、检查用户权限或者设置默认路径等操作。例如：

   import { useRouter } from 'vue-router'
   
   const router = useRouter()
   router.beforeEach((to, from, next) => {
     // 在这里进行验证或处理
     if (/* 验证通过 */) {
       next()
     } else {
       next({ path: '/login' }) // 跳转到登录页面
     }
   })

2. **组件级守卫**（`beforeRouteEnter` 和 `beforeRouteUpdate`）：针对特定的路由组件，在组件实际渲染前执行。`beforeRouteEnter` 在组件实例被创建之前调用，而 `beforeRouteUpdate` 则在组件已经挂载并更新时调用。
- `beforeRouteEnter` 示例：

     setup() {
       async function beforeRouteEnter(to, from, next) {
         await someAsyncAction() // 在渲染组件前完成某些操作
         next(vm => vm)
       }
       return { beforeRouteEnter }
     }

- `beforeRouteUpdate` 示例：

     watch('$route', to => {
       // 在当前组件已被渲染并且新的路由信息可用时调用
       // 可用于更新数据或状态
     })

3. **全局后置守卫**（` afterEach`）：在每次导航完成后都会触发，无论是否发生导航切换。

这些守卫可以让你更好地控制用户的导航流程，并在组件之间共享状态管理。