VueJS schließen Hamburger Menü auf der Route ändern

Question

Ich habe eine einfache VueJS App mit einem Navigationsleiste von 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> 

Jetzt will ich sicherstellen, dass, wenn ich die Route zu ändern, wird die Bootstrap-Menü geschlossen. Was ist der beste Weg, dies zu erreichen?

Answer 1

könnten Sie geben diesem einen Versuch:

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