vue3 setup如何使用beforerouterenter

在 Vue3 中，`beforeRouterEnter` 是 Vue Router 提供的一个导航守卫，它在每个路由组件被首次渲染前调用。这个钩子让你有机会在进入路由之前执行一些异步操作或者做一些初始化工作，比如获取数据并设置到组件的状态。

在 `setup()` 函数中使用 `beforeRouterEnter` 的语法如下：

import { onRouteEnter } from 'vue-router'

const useBeforeRouteEnter = (to, from, next) => {
  // 异步操作或数据获取
  async function fetchData() {
    const data = await yourAsyncFunction(to.params) // 替换为你的实际请求函数
    // 设置数据到组件的 reactive 或 ref
    setComponentData(data)
  }

  // 如果你想在数据准备就绪后再进入页面，可以这样做
  fetchData().then(next).catch(next.error)
  // 或者直接在完成数据获取后调用 next() 进入页面
}

// 在 setup 函数中注册该守卫
onRouteEnter(setupContext, useBeforeRouteEnter)

// 其中 setupContext 就是在 setup 中接收的 context 对象，包含 props 和 setup 返回的结果等

在 `setup()` 函数内部，你需要通过 `onRouteEnter` 注册这个回调，并传入你要执行的异步操作以及 `next` 函数，用于告知路由系统何时可以继续进行。