这是一个与如何使用 vue-router-links 制作导航栏项目以切换导航栏类似的问题？但我不允许在那里发表评论，并且给出的解决方案无论如何对我不起作用。
我正在使用 Vue 3 和 Bootstrap 5，以下代码的工作方式与标准 Bootstrap 代码的工作方式完全相同，即切换汉堡菜单打开和关闭菜单，但单击链接不会执行任何操作（除了正确路由到被单击的页面之外，这意味着用户然后必须再次点击汉堡菜单才能关闭）
导航栏组件：
<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 & 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>
没有任何“可见”的东西的工作方式完全相同 - 这是在尝试上面链接中给出的解决方案时添加的。
“切换汉堡菜单会打开和关闭菜单，但单击链接不会执行任何操作（除了正确路由到所单击的页面之外）”
这就是 Bootstrap 导航栏的工作原理。单击链接后它不会自动折叠/隐藏。通常，您必须执行类似的操作才能在单击链接后关闭导航栏。
但是使用 Vue 时，您可以根据需要在
collapsenavbar-collapsevisible<div class="navbar-collapse" :class="!visible?'collapse':''" id="navContent">我将
data-toggledata-bs-toggledata-targetdata-bs-target我的main.js（主入口文件）有这个
...
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";
...
如果您通过 NPM 使用 bootstrap，则必须遵循 this 指南。据我所知，例如在 Angular 或 React 中使用它的方式是不同的。
除此之外，如果您想在项目中使用 bootstrap 并设置它，最简单的方法就是使用 CDN，我将向您展示如何操作：
在主布局中的
head<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
在你的
body<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
我遇到了同样的问题，bootstrap (5.1.3) 和 Vue (3.2.36)。所以我安装了 bootstrap-vue-3 (0.1.13) 并使用 和 使其工作。 另外，如果没有“navbar-light bg-light”，汉堡包图标一开始不会出现。 希望这有帮助。
<template>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<div class="container-fluid">
<RouterLink class="navbar-brand" to="/">
<img class="logo" src="../assets/svg/logo.svg" />
</RouterLink>
<b-button
v-b-toggle.collapse-1
variant="primary"
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#menuItems"
aria-controls="menuItems"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</b-button>
<b-collapse id="collapse-1" class="mt-2 collapse navbar-collapse">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<RouterLink class="nav-link" to=" /">home </RouterLink>
</li>
<li class="nav-item">
<RouterLink class="nav-link" to=" /something"
>something
</RouterLink>
</li>
<li class="nav-item">
<RouterLink class="nav-link" to="/about"
>about
</RouterLink>
</li>
</ul>
<form class="d-flex">
<input
class="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success" type="submit">
Search
</button>
</form>
</b-collapse>
</div>
</nav>
我在 Vue 3 / Bootstrap 5 / vue-router 的另一个线程中发现了一个调整： 如何在点击时隐藏可折叠的 Bootstrap 导航栏
在菜单标签周围和 li / routerling 内部添加一个简单的 span 标签对我有用：
<div class="collapse navbar-collapse" id="navigation">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<RouterLink class="nav-link" to="/"><span data-bs-target="#navigation" data-bs-toggle="collapse">Menu 1</span></RouterLink>
</li>
<li class="nav-item">
<RouterLink class="nav-link" to="/ventes.html"><span data-bs-target="#navigation" data-bs-toggle="collapse">Menu 2</span></RouterLink>
</li>
</ul>
希望对你有帮助！
我想分享我针对这个特定问题的解决方法/解决方案。
不要使用router-link组件，而是通过处理vue-router中的
click事件，通过
vue中的push方法手动触发导航。
这允许 HTML 的“静态”布局，以便您可以保留 Bootstap 中的功能，从而允许通过数据属性控制导航栏的折叠。
为了触发活动导航样式，您可以使用vue中的类绑定
和
vue-router中的route.name值。它也适用于稍微修改的路径。这是一个基本示例：
<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const navigate = name => router.push({ name })
</script>
<template>
<div class="container">
<span class="navbar-brand">EXAMPLE NAVBAR</span>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<li class="nav-item">
<span :class="['nav-link', route.name === 'camping' ? ' active' : '']"
role="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
@click="navigate('camping')">CAMPING</span>
</li>
<li class="nav-item">
<span :class="['nav-link', route.name === 'fishing' ? ' active' : '']"
role="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
@click="navigate('fishing')">FISHING</span>
</li>
</div>
</div>
</div>
</template>
<li class="nav-item mx-1">
<NuxtLink class="btn nav-button nav-text" to="/eventi">
<span data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse">Servizi</span>
</NuxtLink>
</li>
我解决了在链接名称周围添加带有 data-bs-target="#navbarSupportedContent" 和 data-bs-toggle="collapse" 的 span 标签（在我的例子中它们是 NuxtLink，但我认为可以与 Router-link 一起使用） )