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

Posted 2023-02-22

【中文标题】VueJS 在路线更改时关闭汉堡菜单

【英文标题】：VueJS close Hamburger Menu on Route Change

【发布时间】：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" ></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() ?

我也对等待下一页加载的选项感兴趣，或者至少当前页面在关闭功能之前过渡出去

【参考方案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" ></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();
    );

这行得通