Nuxt 导航栏下拉列表不会下降

Question

我刚刚开始使用nuxt，并试图让导航栏工作，我有这个：

组件/NavBar.vue

<template>
<div>
<b-navbar type="dark" variant="dark">
<b-navbar-nav>
<b-nav-item href="#">Home</b-nav-item>
<!-- Navbar dropdowns -->
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown text="User" right>
<b-dropdown-item href="#">Account</b-dropdown-item>
<b-dropdown-item href="#">Settings</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-navbar>
</div>
</template>

页面/索引.vue

<template>
<div id="app">
<NavBar />
<nuxt/>
</div>
</template>
<script>
import NavBar from "~/components/NavBar.vue";
export default {
components: {
NavBar
}
};
</script>

导航栏显示正常，但下拉菜单不起作用——我缺少什么？？

编辑

刚刚注意到它找不到runtime.js——不确定这是否相关？

GET _nuxt/runtime.js net::ERR_ABORTED 404

Answer 1

在pages/index.vue中，您不应该有<nuxt/>和<div id="app">，因为此标记会转到您的layout/default文件

也从import中删除.vue

最后的代码应该是这样的：

<template>
<div>
<NavBar />
</div>
</template>
<script>
import NavBar from "~/components/NavBar";
export default {
components: {
NavBar
}
};
</script>

希望它能起作用！