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:

<router-link to="/" tag="li" class="inline">
  <a>Todos</a>
</router-link>

Migrating to Vue 3

This now works a little differently:

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

(Documentation)

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.

Further Reading

• VueRouter Migration Guide