vue3 setup lang=ts实现router-link的动态传参

在 Vue Router 中，通过 `router-link` 组件传递 query 参数到新页面时，可以使用 TypeScript 来提取和使用这些参数。以下是具体步骤和示例代码： 1. **传递参数**： 在原页面使用 `router-link` 组件传递 `id` 参数。假设我们有一个列表项需要点击后跳转到详情页面，并传递该项的 `id`。 ```vue <template> <div> <ul> <li v-for="item in items" :key="item.id"> <router-link :to="{ path: &#39;/detail&#39;, query: { id: item.id }}"> {{ item.name }} </router-link> </li> </ul> </div> </template> ``` 2. **接收参数**： 在新页面中，使用 `useRoute` 钩子函数获取路由对象，并通过 `route.query.id` 访问传递的参数。 ```typescript <template> <div> <h1>Details Page</h1> <p>ID: {{ id }}</p> </div> </template> <script lang="ts"> import { defineComponent, ref } from &#39;vue&#39;; import { useRoute } from &#39;vue-router&#39;; export default defineComponent({ setup() { const route = useRoute(); const id = ref(route.query.id as string); // 确保类型为 string，可以根据实际需求更改类型 return { id }; }, }); </script> ``` 3. **处理参数**： 可以在新页面的 `setup` 函数中进一步处理这个 `id` 参数，例如根据 `id` 进行数据请求等操作。 ```typescript <script lang="ts"> import { defineComponent, ref, onMounted } from &#39;vue&#39;; import { useRoute } from &#39;vue-router&#39;; import { fetchItemDetails } from &#39;./api&#39;; // 假设有一个 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> ```