Vue3 不切换 Bootstrap 5 NavBar

Question

这是一个与 How can I make navbar items with vue-router-links to toggle the navbar? 类似的问题，但不允许我在那里发表评论，而且给出的解决方案对我也不起作用。

我正在使用 Vue 3 和 Bootstrap 5，下面的代码与标准 Bootstrap 代码完全一样，即切换汉堡菜单打开和关闭菜单，但单击 link 什么也不做（除了正确路由到被点击的页面，这意味着用户必须再次点击汉堡菜单才能关闭）

导航栏组件：

    <template>
  <nav class="navbar navbar-dark bg-dark navbar-expand-sm">
    <div class="container-fluid">
        <router-link class="navbar-brand" to="/">Birch Farm</router-link> |
        <button class="navbar-toggler" type="button"  
          :class="visible ? null : 'collapsed'" 
          data-bs-toggle="collapse" 
          data-bs-target="#navContent" 
          aria-controls="navContent" 
          :aria-expanded="visible ? 'true' : 'false'"
          @click="visible = !visible" 
          aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navContent">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
              <li class="nav-item active">
                <router-link class="nav-link px-3" active-link="active" to="/" @click="visible = !visible">Home</router-link>
              </li>
              <li class="nav-item">
                <router-link class="nav-link px-3" to="/camping" @click="visible = !visible">Camping &amp; Caravanning</router-link>
              </li>       
              <li class="nav-item">
                <router-link class="nav-link px-3" to="/fishing" @click="visible = !visible">Cat Rough Fishery</router-link>
              </li>  
              <li class="nav-item">
                <router-link class="nav-link px-3" to="/contact" @click="visible = !visible">Contact Us</router-link>
              </li>  
            </ul>
        </div>
    </div>
  </nav>
</template>

<script setup>
  import {ref} from 'vue'
  const visible = ref(false);
</script>
<script>
export default {
  name: "NavBar",
  created() {},
  data() {},
  props: {},
  methods: {},
  components: {}
};
</script>

<style lang="scss" scoped></style>

没有任何 'visible' 东西的工作方式完全相同 - 这是在尝试上面 link 中给出的解决方案时添加的。

Answer 1

如果您通过 NPM 使用 bootstrap，则必须遵循 this 指南。只要我看到，在Angular或React中使用它的方式是不同的，例如

除此之外，如果您想在项目中使用 bootstrap 并设置它，最简单的方法就是使用 CDN，我将向您展示如何：

在您的主布局中，在 head 标记内，放置以下内容：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

在你的 body 标签中，这个：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

Answer 2

"toggling the hamburger menu opens and closes the menu but clicking a link does nothing (other than correctly route to the page being clicked"

这就是 Bootstrap 导航栏的工作原理。单击 link 后它不会自动 collapse/hide。通常，在单击 link.

后，您必须执行才能关闭导航栏

但是在使用 Vue 时，您可以根据需要在 navbar-collapse div 上使用您的 visible 值切换 collapse class...

<div class="navbar-collapse" :class="!visible?'collapse':''" id="navContent">

演示：https://codeply.com/p/lHTzN4amfe

Vue3 不切换 Bootstrap 5 NavBar

Vue3 not toggling Bootstrap 5 NavBar

navbar

vuejs3

bootstrap-5