3

While using

"vue": "^2.6.12" & "vue-router": "^3.5.1",

I receive this warning after each reload of the page:

[vue-router] In Vue Router 4, the v-slot API will by default wrap its content with an <a> element. Use the custom prop to remove this warning: <router-link v-slot="{ navigate, href }" custom></router-link>

This warning ist not clear to me. Why do get this warning when not using vue-router v4 and how to set the custom prop?

Felix
  • 31
  • 1
  • 2

3 Answers3

4

This warning is appearing, because there is a change in Vue Router v4 that has changed how <router-link> works, and this is letting you know of this change. It appears that you are using a <router-link> component with the event or tag property, and this will not work in Vue Router v4.

This doesn't break your code on Vue Router v3 but if you wanted to remove the warning, the best way to do that is use the new v-slot API which will also be supported in Vue Router v3.

Instead of

<router-link event="dblclick" :to="{name: 'route.name'}" tag="div">Content</router-link>

this then becomes

<router-link custom :to="{name: 'route.name'}" v-slot="{ href, navigate }">
    <div @dblclick="navigate">Content</div>
</router-link>

More Info: https://next.router.vuejs.org/guide/migration/index.html#removal-of-event-and-tag-props-in-router-link

megubyte
  • 1,549
  • 9
  • 15
  • 5
    your explanation is not clear to me. is exaclty as the documentation and I am really confused. Can you do step by stepd with a real example. For example I have this : ``` ``` To writte the for the new version what I should write and why? – Raquel Santos Sep 27 '21 at 10:12
2

The complete example from the docs looks like this:

Both event, and tag props have been removed from . You can use the v-slot API to fully customize :

replace

<router-link to="/about" tag="span" event="dblclick">About Us</router-link>

with

<router-link to="/about" custom v-slot="{ navigate }">
  <span @click="navigate" @keypress.enter="navigate" role="link">About Us</span>
</router-link>
Picard
  • 3,745
  • 3
  • 41
  • 50
0

For removing warnings, you can use a slot like this. This is available in Vue Router 4

<router-link custom :to="{name: 'route.name'}" > <slot /> </router-link>

Timon0305
  • 1
  • 1
  • 2