如何在vue中链接列表[关闭]

Question

<template>
    <div class="lists">
        <div v-for="(list, key, i) in getAllBreeds" :key="i">
            <div v-if="list.length">
                <div v-for="(ele,i) in list" :key="i" class="listOption">
                    <router-link :to="/breed/:key/:ele">
                        {{ele}} {{key}}
                    </router-link>
                </div>
            </div>
            <div v-else class="listOption">
                <router-link :to="/breed/:key/images">
                    {{key}}
                </router-link>
            </div>
        </div>
    </div
</template>

我正在使用 Vue 路由器。我读了很多文章，但我仍然无法理解其中的任何内容。

Answer 1

链接指向localhost:8080/breed/:key/:ele 的原因是您没有对值进行插值。该速记仅用于设置元素的属性。您希望将您的 router-link 更改为如下所示：

<router-link :to="`/breed/${key}/${ele}`">
  {{ele}} {{key}}
</router-link>