Vue 中的动态路由器 link

Question

我有一个卡片数组，每个项目都有其独特的 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。那你觉得我怎么办？

感谢您的帮助

Answer 1

你可以试试这个

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

Vue 中的动态路由器 link

Dynamic router link in Vue

router

vue.js

vue-router

vuejs2

routerlink