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

【问题标题】：When the name of a router link is dynamic how should we name the link?当路由器链接的名称是动态的时，我们应该如何命名链接？
【发布时间】：2022-10-13 08:36:27
【问题描述】：

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

<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 }" 也不起作用。

【问题讨论】：

有什么错误吗？

标签： vuejs2 bootstrap-vue

【解决方案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>

【讨论】：

【解决方案2】：

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

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>

【讨论】：