vue router-link组件中query参数里面传到新页面的id ts语法怎么提取使用

在 Vue Router 中，通过 `router-link` 组件传递 query 参数到新页面时，可以使用 TypeScript 来提取和使用这些参数。以下是具体步骤和示例代码：

1. **传递参数**：
在原页面使用 `router-link` 组件传递 `id` 参数。假设我们有一个列表项需要点击后跳转到详情页面，并传递该项的 `id`。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <router-link :to="{ path: '/detail', query: { id: item.id }}">
          {{ item.name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

2. **接收参数**：
在新页面中，使用 `useRoute` 钩子函数获取路由对象，并通过 `route.query.id` 访问传递的参数。

<template>
  <div>
    <h1>Details Page</h1>
    <p>ID: {{ id }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useRoute } from 'vue-router';

export default defineComponent({
  setup() {
    const route = useRoute();
    const id = ref(route.query.id as string); // 确保类型为 string，可以根据实际需求更改类型

    return { id };
  },
});
</script>

3. **处理参数**：
可以在新页面的 `setup` 函数中进一步处理这个 `id` 参数，例如根据 `id` 进行数据请求等操作。

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { fetchItemDetails } from './api'; // 假设有一个 api 模块用于数据请求

export default defineComponent({
  setup() {
    const route = useRoute();
    const id = ref(route.query.id as string);
    const itemDetails = ref({});

    onMounted(async () => {
      itemDetails.value = await fetchItemDetails(id.value);
    });

    return { id, itemDetails };
  },
});
</script>