vue3+angent-vue+typescript调接口跳转详情页

在Vue 3 + Ant Design Vue + TypeScript项目中，如果需要在跳转到详情页之前调用接口获取数据，可以按照以下步骤进行操作：

1. 首先，在Vue组件中使用`axios`或其他HTTP请求库进行接口调用，并获取数据。

import { defineComponent, ref, onMounted } from 'vue';
import axios from 'axios';

export default defineComponent({
  setup() {
    const data = ref(null);

    onMounted(async () => {
      try {
        const response = await axios.get('/api/detail');
        data.value = response.data;
      } catch (error) {
        console.error(error);
      }
    });

    return {
      data,
    };
  },
});

2. 在获取数据后，可以将数据传递给详情页组件。

<router-link :to="`/detail/${data.id}`">跳转到详情页</router-link>

3. 创建详情页组件，并在其中接收参数并展示数据。

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

export default defineComponent({
  setup() {
    const route = useRoute();
    const id = ref('');
    const data = ref(null);

    onMounted(async () => {
      try {
        const response = await axios.get(`/api/detail/${id.value}`);
        data.value = response.data;
      } catch (error) {
        console.error(error);
      }
    });

    return {
      id,
      data,
    };
  },
});

4. 在路由配置中定义详情页的路由规则。

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 定义路由规则
    { path: '/detail/:id', component: DetailPage },
  ],
});

这样就可以在Vue 3 + Ant Design Vue + TypeScript项目中，调用接口获取数据后跳转到详情页，并将数据传递给详情页组件进行展示。请根据实际情况进行适配和调整。