如何使用 vue-router-links 制作导航栏项目以切换导航栏？

Question

我有一个运行良好的导航栏。除了单击项目时它不会关闭的事实。 当我单击窗口中的其他任何位置时，它确实会关闭。

我在 laravel 8 和 vue-3 中工作，安装了 bootstrap-5。

导航栏：

<template>
<div class="container-fluid navbar-custom-header">
<a class="close-navbar-toggler collapsed" data-bs-toggle="collapse" data-bs-target="#mySideBar" aria-controls="mySideBar" aria-expanded="false" aria-label="Toggle navigation">
</a>
   <nav class='navbar-custom navbar-dark fixed-top' >
       <div class="row " style="vertical-align:center">
           <div class="col-2">
               <button  class="openbtn dropdown-toggle" data-bs-toggle="collapse"  data-bs-target="#mySideBar">&#9776;</button>
           </div>    
           
           <div class="col-3">
               <a href="#" class="navbar-brand">Cards</a>
           </div> 
           <div class="col-3" v-if="!loggedIn">
               <router-link to="/login"> Login </router-link>
           </div>
           <div class="col-3" v-if="loggedIn">
               <router-link to="/logout"> Logout </router-link>
           </div>
             
       </div>
   </nav>
</div>
<div class="navbar-custom-container" style="z-index:10">
   <nav id="mySideBar" class="collapse navbar-custom navbar-collapse">
       <div class="navbar-custom-items">    
           <ul class="nav navbar-nav">
               <br>
               <br>
               <li class="nav-item"><router-link to="/memory" class="nav-link"> MemoryGame </router-link></li>
               <br>
               <li><router-link to="/cards" > Manage Cards </router-link></li>
               <br>
               <li><router-link to="/aanmelden"> Nieuwe Speler aanmelden </router-link></li>
               <br>
               <li><router-link to="/game"> Game spelen </router-link></li>
               <br>
               <li><router-link to="/game/admin"> GameAdmin </router-link></li>
           </ul>
       </div>
   </nav>
</div>
              
</template>

<script>


export default {
computed: {
   loggedIn() {
       return this.$store.getters.loggedIn
   }
}
   
 
} 

</script>

以及随附的 css：

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';


.close-navbar-toggler{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:1;
    cursor:pointer;
  }

  .close-navbar-toggler.collapsed{
    z-index:-1;
  }
  
.navbar-custom-header {
    background-color: rgb(5, 4, 71);
    color:rgb(245, 209, 8);
    margin:auto;

}
.navbar-custom-container {
    display:flex;
    justify-content:flex-start;
    position:absolute;
    //padding:0px 12px;

}

.navbar-header {
    background-color: rgb(5, 4, 71);
}

.navbar-custom {
    background-color: rgb(17, 15, 172);
    color:yellow;
    padding:12px -12px;
}

.navbar-toggler-icon {
    vertical-align:middle;
    text-align:left;
}

.navbar-custom-items > a:link {
    color:black;   
}
.navbar-custom-items > a:active {
    color:rgb(73, 7, 7);   
}
.navbar-custom-items > a:hover {
    color:rgb(138, 59, 241);   
}

我意识到我并不完全理解 Bootstrap 如何捕获折叠命令。 谁能解释一下？

Answer 1

在vue3中，您将拥有一个将导航菜单表示为模板的组件。然后，组件将如下所示（使用 bootstrap-vue-3 组件，例如 b-collapse，但您也可以使用 div 标签）：

<template>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button"
              :class="visible ? null : 'collapsed'"
              :aria-expanded="visible ? 'true' : 'false'"
              @click="visible = !visible"
              aria-controls="navbarSupportedContent"
              aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <b-collapse class="collapse navbar-collapse" id="navbarSupportedContent" v-model="visible">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <router-link class="nav-link" :to="{name: 'home'}" @click="visible = !visible">
             home
            </router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" :to="{name: 'page1'}" @click="visible = !visible">
             page1
            </router-link>
          </li>
        </ul>
      </b-collapse>
    </div>
  </nav>
</template>

<script setup>
import {ref} from 'vue'
const visible = ref(false)
</script>

在模板示例中，您可以看到单击导航栏切换器或链接，组件的visible 属性被切换。并且navbarSupportedContent元素是可见的，这取决于visible (v-model="visible") 的值。如果你不使用 bootstrap-vue-3，那么你可以在 div 中使用 v-show="visible" 来切换它。