Vue导航栏Bootstrap下拉菜单内Router-Link失效、点击无法展开问题

核心原因 #

• Bootstrap 5已废弃原data-toggle属性，替换为data-bs-toggle属性，所有交互相关的data-*属性都需要新增bs前缀才会生效
• 下拉触发器的<a>标签默认href="#"会触发Vue Router的跳转逻辑，点击后路由会尝试匹配/#路径，页面状态被重置，下拉菜单来不及完成展开逻辑
• 未引入Bootstrap依赖的JS文件/Popper.js：下拉等交互组件需要依赖对应JS处理定位和展开逻辑，仅引入CSS无法使用交互功能

修复方案 #

方案1：修改原生Bootstrap代码（改动最小） #

替换导航栏的下拉触发器代码即可：

<a 
  class="nav-link dropdown-toggle" 
  role="button" 
  @click.prevent 
  id="navbarDropdownMenuLink" 
  data-bs-toggle="dropdown" 
  aria-haspopup="true" 
  aria-expanded="false"
>
  Event Actions
</a>

改动说明：

• 新增@click.prevent阻止<a>标签的默认跳转行为，避免触发Vue Router路由更新
• 将data-toggle替换为Bootstrap 5要求的data-bs-toggle
• 把aria-expanded默认值改为false符合控件初始状态规范

同时确认入口文件main.js中已经引入Bootstrap JS资源：

// npm安装的Bootstrap 5引入方式
import 'bootstrap/dist/css/bootstrap.min.css'
import * as bootstrap from 'bootstrap'

如果使用Bootstrap 4版本，不需要修改data-toggle属性，只要确保提前引入jQuery、Popper.js以及Bootstrap 4的JS文件即可。

方案2：使用BootstrapVue组件库（长期维护更友好） #

如果项目允许引入第三方适配库，直接使用BootstrapVue提供的原生Vue组件，完全避免原生Bootstrap和Vue的交互冲突：

<b-dropdown id="navbarDropdownMenuLink" text="Event Actions" variant="link" class="nav-link">
  <b-dropdown-item to="/CreatEvent">Create an event</b-dropdown-item>
  <b-dropdown-item to="/ViewEvent">View events</b-dropdown-item>
  <b-dropdown-item to="/EditEvent">Update an event</b-dropdown-item>
</b-dropdown>

内容的提问来源于stack exchange，提问作者Cristian