vue-router 3.5.1 中的警告：在 Vue Router 4 中，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 时收到此警告以及如何设置自定义 prop？

Answer 1

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

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

代替

<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