当路由器链接的名称是动态的时，我们应该如何命名链接

Question

我在导航栏中有一个将被渲染的项目列表。每个项目都应该有一个与其名称相关的链接。因为我不想硬编码的链接，我不知道如何命名的链接。

<b-nav-item-dropdown no-caret class="mr-2">
<!-- Using 'button-content' slot -->
<template #button-content>
<div><b-icon icon="person-fill"></b-icon> {{ userItems[0] }}</div>
</template>
<b-dropdown-item
v-for="(userItem, index) in userItems[1]"
:key="index"
:to="userItem"
>
{{ userItem }}
</b-dropdown-item>
</b-nav-item-dropdown>

：to="；｛name:userItem｝"也不起作用。

Answer 1

我认为您的代码应该是：

<b-dropdown-item
v-for="(userItem, index) in userItems[1]"
:key="index"
>
<router-link to="your_path_or_route_name_here">
</b-dropdown-item>

Answer 2

我试图重现您的问题，但由于我不知道您的数据，我创建了自己的userItems。我为您创建了一个代码片段，以便更好地理解实现。

new Vue({
el: '#app',
data() {
return {
userItems: [{
name: "Link 1",
path: "/link1"
},
{
name: "Link 2",
path: "/link2"
},
{
name: "Link 3",
path: "/link3"
}
],
}
},
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-nav-item-dropdown no-caret class="mr-2">
<!-- Using 'button-content' slot -->
<template #button-content>
<div>
Dropdown
</div>
</template>
<b-dropdown-item v-for="(userItem, index) in userItems" :key="index" :to="userItem.path">
{{ userItem.name }}
</b-dropdown-item>
</b-nav-item-dropdown>
</div>