Support data-* attributes instead of classes for active router links

[dysphasia]

I would love to see optional support for using data-* attributes over class names to indicate router links. It's mostly a semantic change, but it seems appropriate to use attributes in this scenario. Additionally, there would be an indication in the DOM of which elements are router links, even when they are not active, which could be targeted through css.

<nav>
 <a href="/foo" data-router-link="active">Foo</a>
 <a href="/foo/bar" data-router-link="active-exact">Foo Bar</a>
 <a href="/baz" data-router-link="inactive">Baz</a>
 <a href="#">I am not a router link</a>
</nav>

nav a[data-router-link] { } /* presence selector */
nav a[data-router-link^="active"] {}  /* target active links */
nav a[data-router-link$="exact"] {}   /* target exact link */
nav a[data-router-link="inactive"] {}  /* target inactive link */

[posva]

This is achievable through the v-slot API: https://router.vuejs.org/guide/advanced/extending-router-link.html