vue-router 3.5.1 中的警告：在 Vue Router 4 中，默认情况下 v-slot API 将使用 <a> 元素包装其内容答案

【问题标题】：warning in vue-router 3.5.1: In Vue Router 4, the v-slot API will by default wrap its content with an <a> elementvue-router 3.5.1 中的警告：在 Vue Router 4 中，默认情况下 v-slot API 将使用 <a> 元素包装其内容
【发布时间】：2021-08-12 07:38:39
【问题描述】：

使用时

"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 时会出现此警告以及如何设置自定义属性？

【问题讨论】：

标签： vue.js vue-router vue-router4

【解决方案1】：

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

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

代替

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

【讨论】：

你的解释我不清楚。与文档一样准确，我真的很困惑。你能用一个真实的例子一步一步地做吗？例如我有这个：``` ``` 为新版本写我应该写什么，为什么？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

docs 的完整示例如下所示：

事件和标签道具都已从 .你可以使用 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>

【讨论】：