在 vue.js 路由器链接中添加下拉菜单

Question

我创建了一个 vue.js 路由器，并使用下文中的结构插入在数组中找到的链接。这会水平显示链接。但是，我想插入下拉列表，而不是简单的链接。这可以通过某种方式使用这个或类似的结构来完成吗？

<nav style="text-align: right">
  <router-link class="spacing" v-for="routes in links"
  v-bind:key="routes.id"
  :to="`${routes.page}`">{{routes.text}}</router-link>
</nav>

      links: [
    {
      id: 0,
      text: 'Buy',
      page: '/Buy'
    },
    {
      id: 1,
      text: 'Sale',
      page: '/Sale'
    },
    {
      id: 2,
      text: 'Transactions',
      page: '/Transactions'
    },
    {
      id: 3,
      text: 'Help',
      page: '/Help'
    }
  ]

Answer 1

是的，有几种方法可以做到这一点，但您必须循环访问与 <router-link> 不同的内容，因为该组件会呈现 <a> 标记。

我会首先调整您的 HTML 以允许您想要的下拉交互，无论是基于悬停还是基于点击，然后更改您的数据结构和循环以支持它。

我可能会这样做：

<nav style="text-align: right">

  <div
    class="nav-item"
    v-for="link in links" // Move loop to container of shown link and it's dropdown markup
  >
    <router-link
      :key="link.id"
      :to="`${link.page}`"
    >
      {{ link.text }}
    </router-link>

    <div class="nav-item-drawer">
      <router-link
        v-for="subLink in link.subLinks"
        :key="subLink.id"
        :to="`${subLink.page}`"
      >
        {{ subLink.text }}
      </router-link>
    </div>

  </div>

</nav>

具有以下数据结构：

  links: [
    {
      id: 0,
      text: 'Buy',
      page: '/Buy',
      subLinks: [
        {
          id: 0,
          text: 'Buy Sublink 1',
          page: '/Buy-more'
        },
        {
          id: 1,
          text: 'Buy Sublink 2',
          page: '/Buy-less'
        },
      ]
    },
    {
      id: 1,
      text: 'Sale',
      page: '/Sale'
    },
    //...
  ]