如何在 Vue-Router 中实现导航栏的无缝展开和折叠？

vue.js

2024-05-17 14:48:38

## 如何使用 Vue-Router 导航栏实现无缝切换？

导航栏展开和折叠的难题

在使用 Vue-Router 构建单页应用程序时，一个常见的挑战是如何实现展开和折叠的导航栏。当用户点击导航栏中的项目时，导航栏应该展开，允许用户访问子菜单。当用户点击其他地方时，导航栏应该自动折叠。

Bootstrap 的解救

Bootstrap 提供了一套强大的工具来处理导航栏的行为。通过巧妙地利用其 collapse 类和数据属性，我们可以轻松地实现响应式导航栏。

设置触发器和目标

首先，我们需要设置触发器元素，比如导航栏切换按钮，以及导航栏内容本身作为目标元素。我们将使用 Bootstrap 的 data-bs-toggle="collapse" 属性将触发器与目标元素相关联。

<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#myNavbar">
  Toggle navigation
</button>

<div class="collapse" id="myNavbar">
  ... Navigation links ...
</div>

控制导航栏行为

当用户点击触发器时，Bootstrap 会检查 data-bs-target 属性并根据其值选择目标元素。它会通过添加或删除 collapse 类来控制目标元素的可见性。

$(".btn-primary").click(function() {
  $("#myNavbar").toggleClass("collapse");
});

应用于 Vue-Router

为了将 Bootstrap 的导航栏行为与 Vue-Router 集成，我们可以使用 Vue.js 的内置指令 v-on:click。此指令允许我们在点击事件上监听元素并执行 JavaScript 代码。

<template>
  <nav>
    <button @click="toggleNavbar">Toggle navigation</button>
    <div v-if="isNavbarOpen">
      ... Navigation links ...
    </div>
  </nav>
</template>

<script>
  export default {
    data() {
      return {
        isNavbarOpen: false
      }
    },
    methods: {
      toggleNavbar() {
        this.isNavbarOpen = !this.isNavbarOpen;
      }
    }
  }
</script>