Router Links
Introduction
There are a couple of minor changes concerning router links, which you can read up on in the router's migration guide (See: Further Reading).
The change most probably affecting your apps is that of customizing your links
In the Vue 2 app
Our app's App.vue
contains a couple of router-links, which we customized to use <li>
instead of an <a>
tag, so that the list item receives the active classes and so forth, instead of the <a>
that we included in the router-link's slots:
App.vue(Vue2)
<router-link to="/" tag="li" class="inline">
<a>Todos</a>
</router-link>
Migrating to Vue 3
This now works a little differently:
App.vue(Vue3)
<router-link
to="/"
custom class="inline"
v-slot="{ href, route, navigate, isActive, isExactActive }"
>
<li v-bind:class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
<a :href="href" v-on:click="navigate">Todos</a>
</li>
</router-link>
This is more verbose in this example, but gives you a lot more freedom and flexibility in customizing router links. It's recommended to wrap such custom router links in a component to abstract away that configuration and make it easier to re-use.