Vue Router与Bootstrap 5模态框联动失效：点击链接不跳转

问题原因 #

Bootstrap 5 中，data-bs-dismiss="modal" 属性会在触发模态框关闭操作时主动阻止元素的默认行为，这就导致 router-link 自带的路由跳转动作被拦截。而 Bootstrap 4 没有这个拦截逻辑，所以之前的写法能正常生效。

解决方案 #

方案一：手动控制模态框关闭（推荐） #

移除 data-bs-dismiss="modal"，通过点击事件手动关闭模态框，让 router-link 的跳转逻辑正常执行：

<router-link to="/blog" @click="closeModal">Blog</router-link>

在组件的 methods 中实现关闭方法：

methods: {
  closeModal() {
    const modalInstance = bootstrap.Modal.getInstance(document.getElementById('setting'))
    modalInstance.hide()
  }
}

也可以直接写成内联形式，省去方法定义：

<router-link 
  to="/blog" 
  @click="bootstrap.Modal.getInstance(document.getElementById('setting')).hide()"
>
  Blog
</router-link>

方案二：将关闭属性移至外层容器 #

把 data-bs-dismiss="modal" 加到 router-link 的父元素上，这样模态框关闭逻辑不会影响 router-link 的默认跳转行为：

<div class="modal-body">
  <div data-bs-dismiss="modal" style="cursor: pointer;">
    <router-link to="/blog">Blog</router-link>
  </div>
</div>

这里给外层容器加 cursor: pointer 是为了保持点击交互的视觉提示，也可以通过自定义CSS类来实现。

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