Vue.js如何为列表对象生成对应视图或复用单视图动态渲染数据

你提到的两种方案都可以正常实现，具体操作如下：

方案1：在当前列表页直接渲染所有房间独立视图 #

这个就是你现有代码采用的v-for遍历思路，仅需要修正现有代码的几个问题即可正常工作：

• :key不要绑定整个room对象，改为绑定房间的唯一标识字段（比如room.id），可以优化Vue的虚拟DOM diff性能，避免异常渲染
• 直接在Card的content插槽内用{{room.字段名}}的格式渲染对应房间的任意数据即可，每个Card会自动对应遍历到的房间对象
• 修正后的基础示例代码：

<Card 
  v-for="room in rooms" :key="room.id" 
  class="room" 
  v-on:change="selectedBuilding" 
  style="margin-top: 2rem; margin-left: 7rem; margin-right: 7rem"
>
  <template #header></template>
  <template #title>
    <span class="pr-2">
      Salle {{room.name}} - Level {{room.floor}}
    </span>
    <Divider type="solid"/>
  </template>
  <template #content>
    <!-- 直接渲染当前房间的任意数据 -->
    <p>房间容量：{{room.capacity}}</p>
    <p>设备配置：{{room.equipment}}</p>
    <Button 
      label="Edit" 
      class="p-button-raised p-button-secondary p-button-text" 
      icon="pi pi-fw pi-pencil" 
    ></Button>
    <div>
      <Divider type="solid" style="color: #0d3c61"/>
    </div>
  </template>
  <template #footer></template>
</Card>

这个方案适合房间总数不多的场景，不需要额外配置路由，所有房间视图直接在当前页展示。

方案2：单个通用页面动态加载房间数据（更推荐） #

这个方案完全可行，非常适合房间数量大的场景，所有房间复用同一个页面模板，仅根据传入的标识加载对应数据，具体实现步骤：

1. 首先配置动态路由，以Vue Router 4为例，路由配置文件中新增如下规则：

// router/index.js
{
  path: '/building/room/:roomId',
  name: 'RoomDetail',
  component: () => import('@/views/RoomDetail.vue')
}

2. 修正列表页的router-link跳转逻辑，把当前房间的唯一id传入路由参数：

<router-link :to="{name: 'RoomDetail', params: {roomId: room.id}}" class="pr-2">
  Salle {{room.name}} - Level {{room.floor}}
</router-link>

3. 编写通用的RoomDetail.vue页面，页面加载时根据路由参数获取对应房间数据渲染即可：

• 如果房间列表数据存储在Pinia/Vuex等全局状态中，直接筛选对应id的房间数据即可
• 如果需要从后端拉取数据，在页面的onMounted（Vue3）或created（Vue2）生命周期钩子中，获取路由参数的roomId发起请求拉取对应房间数据
• 页面模板直接渲染拿到的房间对象字段即可，所有房间都复用这一个页面，不需要为每个房间单独创建页面

如果担心刷新页面数据丢失，不推荐通过路由state直接传递整个房间对象，更建议传递id后主动拉取数据，稳定性更高。

内容的提问来源于stack exchange，提问作者bbelmo01