VueJS 在路线更改时关闭汉堡菜单答案

【问题标题】：VueJS close Hamburger Menu on Route ChangeVueJS 在路线更改时关闭汉堡菜单
【发布时间】：2017-08-08 22:05:31
【问题描述】：

我有一个简单的 VueJS 应用，带有来自 Bootstrap 的导航栏：

<template>
  <header id="header">
    <nav class="navbar mynavbar navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="logo" href="index.html"><img src="images/logo.png" alt=""></a>
        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><router-link to="/home"><a>Home</a></router-link></li>
             <li><router-link to="/about"><a>About Us</a></router-link></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container -->
    </nav>
  </header>
</template>

现在我想确保当我更改路线时，引导菜单会关闭。实现这一目标的最佳方法是什么？

【问题讨论】：

<router-link to="/path" @click.native="closeModal()" .... 呢？
@Gintoki 没有任何反应：/
你在叫什么？ closeModal() ?
我也对等待下一页加载的选项感兴趣，或者至少当前页面在关闭功能之前过渡出去

标签： javascript twitter-bootstrap twitter-bootstrap-3 vue.js vuejs2

【解决方案1】：

您无需为每个router-link 添加事件处理程序，只需观察$route 属性的变化即可：

<script>
export default {
  watch: {
    '$route' () {
      $('#navbar-collapse').collapse('hide');
    }
  }
}
</script>

【讨论】：

你好，有没有 jquery 的解决方案？
没有 JQuery : document.querySelector("#navbar-collapse").classList.toggle("active");

【解决方案2】：

无需 Bootstrap 和 jQuery，使用类切换和观察路由变化即可轻松实现。

<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" 
    @click="toggledNav = !toggledNav"
>
   <span aria-hidden="true"></span>
   <span aria-hidden="true"></span>
   <span aria-hidden="true"></span>
</a>

脚本：

export default {
  data () {
    return {
      toggledNav: false
    }
  },
  watch: {
    '$route' () {
      this.toggledNav = false
    }
  }
}

【讨论】：

这对我有用，但我必须将 v-bind:class="{ 'show': toggledNav }" 添加到折叠 div。
@DylanGlockler 你可以使用 :class 速记
不错的简单解决方案！
对于任何 linter 在 '$route' () 上对他们大喊大叫的人，您也可以只写 $route(){} 并且效果很好。不知道为什么示例将其显示为字符串。

【解决方案3】：

你可以试试这个：

<template>
    <header id="header">
        <nav class="navbar mynavbar navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="logo" href="index.html"><img src="images/logo.png" alt=""></a>
                </div>

                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><router-link @click.native="closeMenu()" to="/home"><a>Home</a></router-link></li>
                        <li><router-link @click.native="closeMenu()" to="/about"><a>About Us</a></router-link></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container -->
        </nav>
    </header>
</template>
<script>
    export default {
        methods: {
            closeMenu() {
                $('#navbar-collapse').collapse('hide');
            }
        }
    }
</script>

【讨论】：

【解决方案4】：

使用 vue3 和 bootstrap5，将其添加到 router-link 元素：

data-bs-toggle="collapse" data-bs-target=".navbar-collapse"

对我不起作用：菜单会在没有链接的情况下关闭。所以，我将它添加到 router/index.js 中：

router.beforeEach(() => {
    document.getElementById('navbarCollapse').classList.remove('show');
})

navbarCollapse 是保存菜单/导航项的 div 的 id。它似乎成功了。

如有必要，您可以调整汉堡按钮的状态：其类列表需要包含“collapsed”并将 aria-expanded 设置为“false”。虽然当用户再次单击按钮时，这会得到纠正，所以我没有选择编写该代码。

【讨论】：

【解决方案5】：

如果你使用bootstrap-vue和vue-router。

<script>
    export default {
        watch: {
          '$route' () {
                const element = document.querySelector("#nav-collapse");
                let isShown = element.classList.contains("show");
                if(isShown){
                    this.$root.$emit('bv::toggle::collapse', 'nav-collapse')
                }
            }
        }
    }
</script>

<template>
  <b-navbar toggleable="lg" type="" class="p-0">
      <b-navbar-toggle target="nav-collapse" id="navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </b-navbar-toggle>
      <b-collapse id="nav-collapse" is-nav>
          <div class="nav-wrapper w-100">
             <ul class="app-navigation__list">
                <router-link to="/whatever" tag="li" exact class="app-navigation__list__item">
                    <a href="">
                        <span class="link-text">Home</span>
                    </a>
                </router-link>
                <router-link to="/whatever" tag="li" exact class="app-navigation__list__item">
                    <a href="">
                        <span class="link-text">About</span>
                    </a>
                </router-link>
                <router-link to="/whatever" tag="li" exact class="app-navigation__list__item">
                    <a href="">
                        <span class="link-text">Store</span>
                    </a>
                </router-link>
            </ul>
          </div>
      </b-collapse>
  </b-navbar>
</template>

【讨论】：

对答案添加一些解释
bootstrap-vue.org/docs/components/… 以上 sn-p 正在监视路由更改，然后它将通过 id #nav-collapse 获取元素。 Bootstrap 添加了一个名为 show 的类，当它在汉堡点击时展开。如果它是真的，它将触发 bootstrap-vue 文档中提到的切换方法。
我已经更新了我的答案，看看更好的理解。

【解决方案6】：

我知道这是一个老问题，但我的回答可能会对某人有所帮助。在你的 router/index.js 中执行此操作

    const router = createRouter({}); //P.S I am using Vue3

然后在每个进入的路线之前添加这个。

    router.beforeEach(() => {
        $('.navbar-collapse').collapse('hide'); //Be sure to import jquery
    });

【讨论】：

【解决方案7】：

    router.beforeEach((from,to,next) => {
           $('.navbar-collapse').collapse('hide'); //Be sure to import jquery
        next();
    });

这行得通

【讨论】：