Using the router does not trigger :target pseudo class

[manniL]

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]

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

[manniL]

Thanks for the quick insight 🙏🏻