vue-router 3.5.1 中的警告:<router-link> 的 tag 属性已弃用,并已在 Vue Router 4 中删除
warning in vue-router 3.5.1: <router-link>'s tag prop is deprecated and has been removed in Vue Router 4
自从我更新了 Vue.js 应用程序的节点包后,我在浏览器控制台中收到以下警告:
[vue-router] '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.
@ 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"
我很困惑,在Whosebug or in vue-router Github issues这里找不到解决办法。
这个警告是不可修复的,而只是在将来某个时候升级时不断提醒您注意这一点?如果是这样,为什么它不检查 tag
prop 是否真的被使用了——看起来有点垃圾..
更新
vue-router v3.5.2也有这个问题。
有一个GitHub vue-router issue (closed) and a Github boostrap-vue issue(打开)。
我刚刚检查了他们的代码,他们有一个标签的默认值:
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% 确定这是否会停止抛出警告,因为他们奇怪的检查已经自行设置了默认值。如果应用上述代码后仍然出现警告,则无需担心,因为它只是警告,并且只在非生产环境中显示。
在 caugner 的 GitHub boostrap-vue issues comment 中找到了答案:
The issue was fixed by #6374 and will appear in the next minor version
(2.22.0).
That PR resolves the warnings for most users, except those
that actually use the event and tag props on BLink and similar
components.
bootstrap-vue 2.22.0 尚未发布。当前最新版本是 2021 年 1 月的 v2.21.2。
据我所知,在甚至不使用 event
和 tag
属性的情况下,目前还没有针对此警告的解决方案。
自从我更新了 Vue.js 应用程序的节点包后,我在浏览器控制台中收到以下警告:
[vue-router] '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. @ 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"
我很困惑,在Whosebug or in vue-router Github issues这里找不到解决办法。
这个警告是不可修复的,而只是在将来某个时候升级时不断提醒您注意这一点?如果是这样,为什么它不检查 tag
prop 是否真的被使用了——看起来有点垃圾..
更新
vue-router v3.5.2也有这个问题。
有一个GitHub vue-router issue (closed) and a Github boostrap-vue issue(打开)。
我刚刚检查了他们的代码,他们有一个标签的默认值:
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% 确定这是否会停止抛出警告,因为他们奇怪的检查已经自行设置了默认值。如果应用上述代码后仍然出现警告,则无需担心,因为它只是警告,并且只在非生产环境中显示。
在 caugner 的 GitHub boostrap-vue issues comment 中找到了答案:
The issue was fixed by #6374 and will appear in the next minor version (2.22.0).
That PR resolves the warnings for most users, except those that actually use the event and tag props on BLink and similar components.
bootstrap-vue 2.22.0 尚未发布。当前最新版本是 2021 年 1 月的 v2.21.2。
据我所知,在甚至不使用 event
和 tag
属性的情况下,目前还没有针对此警告的解决方案。