在 Vue Router 4 之前,我有以下标记:
<router-link
:disabled="!ICanGo(item)"
:tag="!ICanGo(item) ? 'span' : 'a'"
:event="ICanGo(item) ? 'click' : ''"
:to="{ name: 'editUsuario', params: { id: item.id } }"
>{{ item.nome }}</router-link>
使用 Vue Router 4,我现在收到以下警告:[vue-router]
<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.
如何将此代码更改为 Vue Router 4 建议?
最佳答案
基于docs for <router-link>
's v-slot
,Vue Router 4 中的等价物是:
<router-link
:to="{ name: 'editUsuario', params: { id: item.id } }"
custom
v-slot="{ href, navigate }"
>
<span v-if="!ICanGo(item)">{{ item.nome }}</span>
<a v-else :href="href" @click="navigate">{{ item.nome }}</a>
</router-link>
!ICanGo(item)
时无需禁用该元素因为 <span>
在这种情况下,它本身没有链接激活。demo
关于javascript - 在 vuejs 中将旧代码修改为 vue router 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65925126/