3

由于我更新了 Vue.js 应用程序的节点包，我在浏览器控制台中收到以下警告：

[vue-router] 的 tag 属性已弃用，并已在 Vue Router 4 中删除。使用 v-slot API 删除此警告： https ://next.router.vuejs.org/guide/migration/#removal- of-event-and-tag-props-in-router-link。@vue-router.esm.js:16

当然，信息非常简单，但是：

在使用的地方，甚至没有应用<router-link>已弃用的tag道具：

<router-link
    class="button-add"
    :to="{
        name: 'ItemEditorAdd',
        params: { parent_item_id: item.id },
    }"
    :id="'button-' + item.id"
>
    <i class="material-icons">add</i>
</router-link>

此外，安装的 vue-router 包甚至不在版本 4 中，而是在版本 3 中，与 v2.6 中安装的 vue.js 正确匹配。警告消息给我的印象是，兼容性检查器假定 v4 正在使用中。

摘自 package.json：

"vue": "^2.6.12",
"vue-class-component": "^7.2.6",
"vue-cookies-ts": "^1.5.19",
"vue-i18n": "^8.24.4",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.5.1",
"vuex": "^3.6.2",
"vuex-class": "^0.3.2",
"vuex-oidc": "^3.10.2"

我很困惑，在StackOverflow或vue-router Github issues中找不到解决方案。
此警告是否无法修复，而只是在将来某个时间升级时不断提醒您注意这一点？如果是这样，为什么它不检查是否tag真的使用了 prop - 似乎有点垃圾邮件..

UPDATE
这个问题也出现在 vue-router v3.5.2 中。
有一个GitHub vue-router 问题（已关闭）和一个Github boostrap-vue 问题（打开）。

4

2 回答 2

1

在 caughner 的这个GitHub boostrap-vue 问题评论中找到了答案：

该问题已由#6374修复，并将出现在下一个次要版本 (2.22.0)中。
该 PR 解决了大多数用户的警告，除了那些在 BLink 和类似组件上实际使用 event 和 tag 道具的用户。

bootstrap-vue 2.22.0 尚未发布。当前最新版本是 2021 年 1 月的 v2.21.2。

AFAIK 目前在甚至不使用eventandtag属性的情况下没有解决此警告的方法。

于 2021-08-18T12:00:22.320 回答
0

我刚刚检查了他们的代码，他们有一个标签的默认值：

tag: {
      type: String,
      default: 'a'
    },

并检查是否标记，显示警告。这太荒谬了，您必须等到他们将其删除。

if ('tag' in this.$options.propsData && !warnedTagProp) {
        warn(
          false,
          `<router-link>'s tag prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link.`
        )
        warnedTagProp = true
      }

要解决它，你必须遵循这个：https ://next.router.vuejs.org/guide/migration/#removal-of-append-prop-in-router-link

<router-link
    class="button-add"
    :to="{
        name: 'ItemEditorAdd',
        params: { parent_item_id: item.id },
    }"
    :id="'button-' + item.id"
    custom
    :slot="{ navigate }"
>
    <i class="material-icons" @click="navigate" @keypress.enter="navigate" role="link">add</i>
</router-link>

我仍然不能 100% 确定这是否会停止发出警告，因为他们奇怪的检查已经自行设置了默认值。如果您在应用上述代码后仍然收到警告，那么您无需担心它，因为它只是警告，并且仅在生产环境以外的环境中显示。

于 2021-05-14T08:57:27.810 回答