使用 Nuxt / Vue.js 与 b-dropdown-item 中的锚链接答案

【问题标题】：Link with anchor in a b-dropdown-item with Nuxt / Vue.js使用 Nuxt / Vue.js 与 b-dropdown-item 中的锚链接
【发布时间】：2022-06-17 19:47:32
【问题描述】：

我无法在b-nav-item-dropdown 中创建带有b-dropdown-item 的锚点的链接。

<b-nav-item-dropdown text="Le magasin de Saint Didier" toggle-class="nav-link-dropdown" right>
  <b-dropdown-item to="/magasin-saint-didier">Le magasin</b-dropdown-item>
  <b-dropdown-item to="/magasin-saint-didier#les-horaires">Les horaires</b-dropdown-item>
  <b-dropdown-item to="/magasin-saint-didier#le-salon-de-the">Le salon de thé</b-dropdown-item>
</b-nav-item-dropdown>

它不起作用。

【问题讨论】：

什么不完全有效？有什么错误吗？
哦等等，这些是哈希值，试试这个:to="{ name: 'magasin-saint-didier', hash: '#les-horaires' }"（假设你有这个name，否则使用path而不是name）。
嗨，Kissu！谢谢 ;) 所以你的代码很好，但只有当我不在页面 magasin-saint-didier 上时才有效。如果是活动页面，则锚点不起作用。

标签： vue.js nuxt.js vue-router bootstrap-vue

【解决方案1】：

如the documentation 所示，可以将对象传递给to 属性。

尝试使用它

<b-dropdown-item :to="{ name: 'magasin-saint-didier', hash: '#les-horaires', replace: true }">Les horaires</b-dropdown-item>

使用replace 将确保即使您已经在同一条路径上，整个事情也能正常工作。

【讨论】：

很好奇：如果我在页面顶部，锚点不起作用...
@VinParker 可能需要对此进行复制？您在 Vue 开发工具中看到了什么？你有一些特定的scroll behavior 或快速直接地关注哈希吗？