vuejs/router

Using the router does not trigger `:target` pseudo class

manniL opened this issue · 2 comments

manniL commented

Reproduction

https://stackblitz.com/edit/vue-router-2076

Steps to reproduce the bug

The CartAside component has CSS styles based on the :target pseudoclass. It is triggered by the links on the page.

  1. Click on "Open Cart via router link"
  2. See that the URL changes but the overlay does not open
  3. Click on Open Cart via a
  4. See that the URL stays (if you'd go from / it'd change correctly too) and the drawer opened

Same with the close links after the overlay.

Expected behavior

When using the RouterLink with an id (e.g. #cart), the :target pseudoclass styles should be triggered

Actual behavior

The :target styles are ignored.

Additional information

As a workaround, using <a> tags works fine 👍🏻

Related issue: nuxt/nuxt#24415

posva commented

It's apparently okay, from vendors' perspective, for this not to work with pushState(). You can find some workarounds too at whatwg/html#639. Using the regular <a> tag for this seems fine too

  • 🚀1
manniL commented

Thanks for the quick insight 🙏🏻

  • 👍1