我正在使用 nuxt 和 bootstrap 构建自定义悬停下拉菜单以进行导航。我遇到的问题是我的导航子菜单 NuxtLinks 正在刷新整个页面，而不是平滑地更改 Nuxt 块中的应用程序内容。导航栏是在 default.vue 布局中动态生成的，并使用 b-dropdown-hover 组件，其中 NuxtLink 包裹着该内容。为什么页面会对这些链接/锚点进行完全刷新，但我的 b-navbar-brand 图像可以平滑过渡？抱歉，我对 Nuxt 很陌生。该视频 @ ~1:35:00 演示了我正在尝试做的事情。
components/BDropdownHoverRight.vue
layouts/default.vue
Search Profile Sign Out
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1
1346
收藏
这里有很多不相关的代码。我花了时间正确格式化它。下次请自己努力（仅格式化和输入有趣的位）。
此外，视频本身已经给出了如何解决该问题的答案。该视频正在讨论
a和nuxt-link标签之间的区别。这与 Bootstrap 的这一部分相关Vue 文档，您可以在其中看到
所以，你应该使用这样的东西
我还发现您的代码与视频有很大不同。您不应该使用
querySelector，您也不必导入 Nuxt 组件，并且您会遇到几个 ESlint 警告/错误。我确实建议尝试专注于学习的单个部分，而不是混合所有内容。想要更进一步是可以的，但要小心，当你学习很多新概念（Vue/Nuxt）时，不要迷失在太多的抽象中。
顺便说一句，如果你想继续学习Nuxt，你可以查看这个：https://masteringnuxt.com/ （由 Nuxt 大使和 Vue 生态系统中的其他知名人士创建）
享受使用 Nuxt 创建项目的乐趣！