Vue -router3.5.1中的警告:在Vue Router4中，v-slot API默认情况下会用<a>元素包装其内容

Question

在使用时

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

每次重新加载页面后，我都会收到以下警告：

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

这个警告对我来说并不清楚。为什么在不使用vue-router v4以及如何设置自定义属性时会收到此警告？

Answer 1

之所以出现此警告，是因为Vue路由器v4中的更改更改了<router-link>的工作方式，这会让您知道此更改。您似乎正在使用具有event或tag属性的<router-link>组件，这在Vue路由器v4中将不起作用。

这不会破坏你在Vue Router v3上的代码，但如果你想删除警告，最好的方法是使用新的v-slot API，它也将在Vue Router v3中得到支持。

而不是

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

然后这就变成了

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

更多信息：https://next.router.vuejs.org/guide/migration/index.html#removal-of-event-and-tag-props-in-router-link

Answer 2

要删除警告，您可以使用如下所示的插槽。这在Vue Router 4中可用

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