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

Question

描述错误

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

在页面之间切换时，我需要再次关闭菜单，但是，我只发现这样做的唯一方法是：bv::toggle::collapse，不幸的是，虽然这有效，但什么时候从另一个页面返回我的主页，菜单会自行重新打开，或者在页面上随机单击 link 时会重新打开。

如何在页面更改时关闭菜单并且在单击切换按钮之前不打开它？

<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
VueJS 2.11.0
BootstrapVue 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>

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

Bootstrap Vue 2.9.0 Navbar collapse doesn't close on page change

nuxt.js

bootstrap-vue

描述错误

版本