Vue中的动态路由器链接答案

【问题标题】：Dynamic router link in VueVue中的动态路由器链接
【发布时间】：2021-10-24 11:16:36
【问题描述】：

我有一个卡片数组，每个项目都有其唯一的 URL。

cards: [
                {
                    id: 0,
                    button: "Tickets for the indoor swimming pool",
                    url: "freibad",
                    src: image1,
                },
                {
                    id: 1,
                    button: "Tickets for the Hangeweiher outdoor pool",
                    url: "hallenbad",
                    src: image2,
                },
                {
                    id: 2,
                    button: "special cards (e.g. bonus, annual and holiday cards)",
                    url: "sonderkarten",
                    src: image3,
                },
            ],

所以在 for 循环中，我试图显示所有卡片：

<div class="card-item col-12 col-md-6 mb-6" v-for="card in cards"
                     :key="card.id">
                    <div class="card">
                        <a v-bind:href="card.url">
                            <img
                                :src="card.src"
                                class="card-img-top"
                                :alt="card.button"
                            />
                        </a>
                        <div class="card-body">
                            <router-link :to="{name: ''}">{{ card.button }}</router-link>
                        </div>
                    </div>
                </div>

但我不知道如何使这部分动态化。 {{ card.button }} 所以基本上我想将第一张卡的名称设置为freibad，第二张卡的名称为hallenbad，第三张卡的名称为sonderkarten。那你觉得我怎么办？

感谢您的帮助

【问题讨论】：

标签： vue.js vuejs2 vue-router router routerlink

【解决方案1】：

你可以试试这个

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

【讨论】：