导航栏下拉菜单没有指向给定的链接

Question

我正在尝试使用 Buefy 组件在 nuxt 上制作导航栏。我实际上有我在这个导航栏中使用的下拉组件并且有问题。这是我在 nuxt 中的导航栏组件

<b-navbar-item class="has-dropdown is-hoverable">
    <b-dropdown hoverable aria-role="list">
        <a slot="trigger" class="navbar-item" role="button">
        <span>Academics</span>
        <b-icon icon="menu-down" />
        </a>
        <template v-for="(each, index) in academicsArray">
        <b-dropdown-item :key="index" aria-role="listitem" tag="nuxt-link" :to="each.link">
            {{ each.text }}
        </b-dropdown-item>
        </template>
    </b-dropdown>
</b-navbar-item>

需要的数组

academicsArray: [
    { link: '/academics/pre-primary', text: 'Pre Primary' },
    { link: '/academics/1', text: 'Class 1' },
    { link: '/academics/2', text: 'Class 2' },
    { link: '/academics/3', text: 'Class 3' },
    { link: '/academics/4', text: 'Class 4' },
    { link: '/academics/5', text: 'Class 5' },
    { link: '/academics/6', text: 'Class 6' },
    { link: '/academics/7', text: 'Class 7' },
    { link: '/academics/8', text: 'Class 8' },
    { link: '/academics/9', text: 'Class 9' }
]

在布局目录中，我有一个名为 website-navbar 的landing.vue 文件

现在，当我在页面中使用此着陆布局并单击下拉项时，它不会将我引导至该链接。 localhost:3000/academics/1 也在工作，所以我已经正确配置了我的路由器，但下拉项并没有引导我到那个链接

Answer 1

您应该在b-dropdown-item 中使用has-link。 在此处查看文档：https://buefy.org/documentation/dropdown#links-within

Answer 2

我使用此处使用的示例使其工作https://buefy.org/documentation/navbar

<b-navbar-dropdown label="Academics" class="is-hoverable">
  <template v-for="(each, index) in academicsArray">
    <b-navbar-item :key="index" :href="each.link">
      {{ each.text }}
    </b-navbar-item>
  </template>
</b-navbar-dropdown>