Vue中v-for渲染卡片时如何配置动态router-link路由

架构老林

2026-10-7

实现方案

你当前的cards数组中每个对象的url属性值刚好和你需要绑定的路由name完全匹配，直接绑定该字段即可，修改模板中router-link的代码如下：

<router-link :to="{name: card.url}">{{ card.button }}</router-link>

注意事项

请提前在路由配置文件中完成对应路由的注册，确保三个路由的name属性分别为freibad、hallenbad、sonderkarten，否则会出现路由匹配错误
如果你后续有调整需求，路由name和卡片的url字段不再一致时，可以在cards数组的每个对象中新增单独的routeName字段存储对应路由名，再将router-link的绑定值改为card.routeName即可
你现有代码中包裹图片的<a v-bind:href="card.url">如果是做同站点跳转，也可以替换为和下方一致的router-link配置，避免整页刷新，优化单页应用使用体验：
```
<router-link :to="{name: card.url}">
  <img
      :src="card.src"
      class="card-img-top"
      :alt="card.button"
  />
</router-link>
```