Introduce `elementTargetClass` option (alternative to `:target`) about router

[posva]

And what does this option do?

[AlttiRi]

Adds the class ("router-target-element" from the example above) to the element with the id the same as the URL's hash.
So, it can be used as an alternative to :target CSS selector which does not work with vue-router.

:target, .router-target-element {
  font-weight: bold;
}

For example, the route /main#1 will add the router-target-element class to the element with id 1.

[posva]

I see, so it's specific to the web hash history and what you mentioned on #2230. It can be solved by creating that custom history you proposed, which seems more appropriate than introducing a new option that only applies to a specific history mode.

[AlttiRi]

it's specific to the web hash history

No, this applicable to both createWebHistory and createWebHashHistory.
With createWebHistory mode the :target CSS selector does not work too.

> Setting the hash with History API do not affect on styling the element with :target selector.

---

I'm not the only one who faced this issue:

• #2076
• whatwg/html#639

So, it can be simple fixed with the similar option as linkActiveClass and linkExactActiveClass.

[posva]

Thanks for pointing out #2076 , I forgot about it being a spec limitation. You should follow w3c/csswg-drafts#6942 for a proper implementation of this.

You can implement the feature in many ways. The most reusable one would be a custom Router Link by checking the current route and the this custom link resolved route's hash