vue文件中写一个列表渲染并且能query传值跳转到每一个详情页面

假设我们有一个列表数据如下：

listData: [
  {id: 1, name: 'Apple', description: 'This is an apple.'},
  {id: 2, name: 'Banana', description: 'This is a banana.'},
  {id: 3, name: 'Orange', description: 'This is an orange.'}
]

那么可以在 Vue 文件中这样写一个列表渲染，并且能够通过 query 传值跳转到每一个详情页面：

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

<script>
export default {
  data() {
    return {
      listData: [
        {id: 1, name: 'Apple', description: 'This is an apple.'},
        {id: 2, name: 'Banana', description: 'This is a banana.'},
        {id: 3, name: 'Orange', description: 'This is an orange.'}
      ]
    }
  }
}
</script>

这里使用了 `v-for` 来遍历列表数据并渲染出来，同时使用了 `router-link` 组件来跳转到每一个详情页面。通过 `:to` 属性来指定跳转的路由和传递的参数，其中 `name` 表示跳转到的路由名称，`query` 表示传递的参数，这里传递了每个项的唯一标识 `id`。需要在路由配置中添加一个详情页面，并且在详情页面中通过 `$route.query` 来获取参数并显示对应的详情信息。