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

【问题标题】：Bootstrap Vue 2.9.0 Navbar collapse doesn't close on page changeBootstrap Vue 2.9.0 导航栏折叠不会在页面更改时关闭
【发布时间】：2020-07-14 16:17:47
【问题描述】：

描述错误

我在我的 Nuxt JS 2.12.2 项目中使用 Bootstrap Vue 2.9.0。我制作了一个导航栏组件，并将其包含在我的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
引导程序 Vue 2.9.0

【问题讨论】：

<b-collapse> 同时也支持v-model。您可以设置一个路由观察器，如果$route（或$route.path）发生变化，则将v-model设置为false

标签： nuxt.js bootstrap-vue

【解决方案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>

【讨论】：