Link with anchor in a b-dropdown-item with Nuxt / Vue.js

Question

I can't create links with anchors with b-dropdown-item in a b-nav-item-dropdown.

<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>

It doesn't work.

Answer 1

As shown in the documentation, you can pass an object to the to prop.

Try using it as

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

Using replace will assure that the whole thing works even if you're already on the same path.