Bootstrap Vue 2.9.0 Свертывание Navbar не закрывается при смене страницы

Question

Опишите ошибку

Я использую Bootstrap Vue 2.9.0 в моем проекте Nuxt JS 2.12.2. У меня есть компонент Navbar, который я сделал, и включил его в свой default.vue макет. К этой проблеме я добавлю содержимое компонента Navbar.

При переключении между страницами мне нужно снова закрыть меню, однако я нашел только один способ сделать это с помощью: 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 одновременно. Вы можете настроить наблюдателя маршрута и установить v-model на false, если $route (или $route.path) изменится

<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>