引导 Vue 2.9.0 导航栏折叠不会在页面更改时关闭

Question

描述错误

我在Nuxt JS 2.12.2项目中使用Bootstrap Vue 2.9.0。我制作了一个Navbar组件，并将其包含在我的default.vue布局中。我将把我的导航栏组件内容附在这个问题上。

在页面之间切换时，我需要再次关闭菜单，然而，我只发现唯一的方法是使用：bv::toggle::collapse，不幸的是，尽管这很有效，但当从另一个页面返回主页时，菜单会重新打开，或者在单击页面上的随机链接时会重新打开。

如何在页面更改时关闭菜单，直到单击切换按钮才打开？

<template>
<b-navbar sticky toggleable="lg" type="dark" variant="dark" class="header-nav bg-transparent position-absolute w-100 p-3">
<b-navbar-brand to="/" class="font-weight-lighter p-3">
Site Name
</b-navbar-brand>
<b-navbar-toggle target="nav-collapse--menu" style="z-index: 90;"></b-navbar-toggle>
<b-collapse id="nav-collapse--menu" is-nav>
<b-navbar-nav class="ml-auto custom-dropdown-menus" id="nav-nav">
<b-nav-item to="/page1" class="text-white font-weight-light p-3">page1</b-nav-item>
<b-nav-item to="/page2" class="text-white font-weight-light p-3">page2</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</template>
<script>
export default {
watch: {
'$route' () {
this.$root.$emit('bv::toggle::collapse', 'nav-collapse--menu')
}
}
}
</script>

版本

• Nuxt JS 2.12.2
• Vue JS 2.11.0
• Bootstrap Vue 2.9.0

Answer 1

<b-collapse>同时也支持v-model。您可以设置路由观察器，如果$route(或$route.path(更改，则可以将v-model设置为false

<template>
<b-navbar sticky toggleable="lg" type="dark" variant="dark" class="header-nav bg-transparent position-absolute w-100 p-3">
<b-navbar-brand to="/" class="font-weight-lighter p-3">
Site Name
</b-navbar-brand>
<b-navbar-toggle target="nav-collapse--menu" style="z-index: 90;"></b-navbar-toggle>
<b-collapse id="nav-collapse--menu" v-model="showCollapse" is-nav>
<b-navbar-nav class="ml-auto custom-dropdown-menus" id="nav-nav">
<b-nav-item to="/page1" class="text-white font-weight-light p-3">page1</b-nav-item>
<b-nav-item to="/page2" class="text-white font-weight-light p-3">page2</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</template>
<script>
export default {
data() {
return {
showCollapse: false
}
},
watch: {
'$route' () {
this.showCollapse = false
}
}
}
</script>