vue3 beforeRouteEnter，在路由进入组件之前获取数据 代码怎么写

在 Vue3 中，使用 `beforeRouteEnter` 钩子函数可以在路由进入组件之前获取数据。下面是一个示例代码：

import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

export default {
  name: 'MyComponent',
  setup() {
    const data = ref(null);
    const route = useRoute();

    const fetchData = async () => {
      // 发送网络请求，获取数据
      const res = await fetch(`https://example.com/${route.params.id}`);
      const json = await res.json();
      data.value = json;
    };

    onMounted(() => {
      fetchData();
    });

    return {
      data,
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 调用组件实例的 fetchData 方法
      vm.fetchData();
    });
  },
};

在上面的代码中，我们使用了 `ref` 来创建响应式数据 `data`，使用了 `useRoute` 来获取当前路由对象 `route`。在 `setup` 函数中，我们使用了 `onMounted` 钩子函数来在组件挂载后调用 `fetchData` 方法获取数据，并将数据保存到 `data` 变量中。在 `beforeRouteEnter` 钩子函数中，我们使用 `next` 回调函数来获取组件实例并调用其 `fetchData` 方法，在路由进入组件之前获取数据。