导航栏下拉菜单未指向给定的 link

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' }
]

在布局目录中，我有 landing.vue 文件，我调用了 website-navbar

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

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>

导航栏下拉菜单未指向给定的 link

Navbar dropdown is not leading to the given link

vue.js

nuxt.js

buefy