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

[AlttiRi]

What problem is this solving

While it supports scrolling to a hash:

export const router = createRouter({
    history: createWebHashHistory(), // createWebHistory
    routes,
    scrollBehavior(to, from, savedPosition) {
        if (to.hash) {
            return { el: to.hash };
        }
    }
});

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

Proposed solution

Add a new createRouters option similar to

• https://router.vuejs.org/api/interfaces/RouterOptions.html#linkActiveClass
• https://router.vuejs.org/api/interfaces/RouterOptions.html#linkExactActiveClass

For example:

export const router = createRouter({
    /* ... */
    elementTargetClass: "router-target-element"
});

Describe alternatives you've considered

No response

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

• https://github.com/vuejs/router/issues/2076
• https://github.com/whatwg/html/issues/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 https://github.com/w3c/csswg-drafts/issues/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