vue.js - warning in vue-router 3.5.1: In Vue Router 4, the v-slot API will by default wrap its content with an element

Answer 1

出现此警告是因为 Vue Router v4 中的更改改变了<router-link>工作方式，这让您知道此更改。看来您正在使用具有or属性的<router-link>组件，这在 Vue Router v4 中不起作用。eventtag

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

代替

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

然后变成

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

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

Answer 2

文档中的完整示例如下所示：

事件和标签道具都已从 . 您可以使用 v-slot API 来完全自定义：

代替

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

和

<router-link to="/about" custom v-slot="{ navigate }">
  <span @click="navigate" @keypress.enter="navigate" role="link">About Us</span>
</router-link>

Answer 3

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

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