为什么配合Bootstrap-vue使用nuxt-link时会触发全页刷新？

AI 小北

2026-10-7

问题根因

HTML不允许a标签嵌套：你当前的BDropdownHoverRight组件将整个下拉组件包裹在<nuxt-link>（最终渲染为<a>标签）内，当下拉项中嵌套另一个BDropdownHoverRight组件时，就会出现<a>标签套<a>标签的非法结构。浏览器会自动拆分这种非法嵌套的标签，导致<nuxt-link>的客户端路由逻辑失效，最终变成普通<a>标签触发全页刷新。
事件冲突：Bootstrap下拉组件的默认点击事件逻辑和外层<nuxt-link>的事件处理存在冲突，也会阻断客户端路由的跳转逻辑。

而b-navbar-brand没有这个问题，是因为它传递to属性后，BootstrapVue会自动渲染为单层合法的<nuxt-link>，没有嵌套结构，所以客户端路由可以正常工作。

修复方案

1. 重写BDropdownHoverRight组件结构

去掉外层的<nuxt-link>包裹，将链接放在下拉按钮的插槽内，避免嵌套a标签：

<template>
  <div class="ddr-top" @mouseover="onOver1($event.target)" @mouseleave="onLeave1($event.target)">
    <b-dropdown ref="dropdown_ddr" class="m-md-2 ddr">
      <!-- 仅按钮文本部分使用nuxt-link -->
      <template #button-content>
        <nuxt-link :to="aTo" class="text-decoration-none text-reset">{{ cText }}</nuxt-link>
      </template>
      <slot></slot>
    </b-dropdown>
  </div>
</template>
<!-- script和style部分保持不变 -->

2. 末端菜单项改用b-dropdown-item

没有子菜单的末端选项不要用BDropdownHoverRight组件，直接使用b-dropdown-item并传递to属性，BootstrapVue会自动将其渲染为适配Nuxt的路由链接：

<template v-for="dir2 in dir1.submenus">
  <b-dropdown-item 
    :key="dir2.id"
    :to="dir2.hasOwnProperty('ato') ? dir2.ato : '/nolink'"
  >
    {{ dir2.name }}
  </b-dropdown-item>
</template>