如何使用 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，那么您可以在

v-show="visible"

中使用

div

来切换它。

Answer 2

我想对@Nechoj的答案添加进一步的解释，并提供另一种解决问题的策略。因为在

v-model

或

<b-collapse>

上使用

<div>

会收到来自 Vue 的警告：

在 Bootstrap 4 和 5 中，

collapse

class 是切换导航栏的关键。 因此，正如 @Nechoj 所建议的，切换机制可以通过以下方式实现：

<script setup>
    import {ref} from 'vue';

    const visible = ref(false)
    const toggleVisible = () => {
        visible.value = !visible.value
    }
</script>

在模板中：

1. 使用

   :class="visible ? null : 'collapsed'"

绑定要折叠的容器元素
2. 将方法

   @click="toggleVisible"

   添加到

   <router-link>

   元素和旨在切换导航栏的

   <button>

   。

<div class="container-fluid">
    <button
        class="navbar-toggler"
        type="button"
        @click="toggleVisible"
        :aria-expanded="visible ? 'true' : 'false'"
        aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <b-collapse class="navbar-collapse" :class="visible ? null : 'collapsed'">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
                <router-link
                    class="nav-link"
                    :to="{ name: 'home' }"
                    @click="toggleVisible">
                    home
                </router-link>
            </li>
            <li class="nav-item">
                <router-link class="nav-link" :to="{ name: 'page1' }" @click="toggleVisible">
                    page1
                </router-link>
            </li>
        </ul>
    </b-collapse>
</div>

请注意，当遵循使用 方法 + CSS 折叠内容的策略时，与 Bootstrap

相关的 

data-bs-toggle

 和 

data-bs-target 属性应被删除。 如果您尝试将

data-bs-toggle

和

data-bs-target

属性添加到已经具有

<router-link>

方法的

@click

元素，您将会出现奇怪的行为。这是因为 Bootstrap 的导航栏并未被设计为让导航链接切换导航栏本身的可见性。