1

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.

kissu
  • 40,416
  • 14
  • 65
  • 133
Vin Parker
  • 93
  • 9
  • What is not working exactly? Any errors? – kissu May 09 '22 at 09:15
  • 1
    Oh wait, those are hashes, try with this `:to="{ name: 'magasin-saint-didier', hash: '#les-horaires' }"` (assuming you have this `name` otherwise use `path` instead of `name`). – kissu May 09 '22 at 09:18
  • Hi Kissu! Thanks ;) So your code is good, but work only if i'm not already on the page magasin-saint-didier. If it is the active page, the anchor doesn't work. – Vin Parker May 09 '22 at 12:03

1 Answers1

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.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • Very curious: if i'm on TOP of the page, the anchor doesn't work... – Vin Parker May 09 '22 at 12:32
  • @VinParker will maybe need a repro on this one? What do you see in your Vue devtools? Do you have some specific [scroll behavior](https://v3.router.vuejs.org/guide/advanced/scroll-behavior.html#scroll-behavior) or a quick and straight follow to the hash? – kissu May 09 '22 at 12:42