0
votes

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?

1

1 Answers

2
votes

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 :to="{name: 'route.name'}" tag="div"></router-link>

this then becomes

<router-link custom :to="{name: 'route.name'}" v-slot="{ href, navigate }">
    <!-- Your custom element goes here -->
</router-link>

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