在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路由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

Vue.js相关问答推荐

Visual Studio代码中的VUE/VLAR扩展不断崩溃:JS/TS语言服务立即崩溃5次…

为什么普通对象在 Vue3 中自动变成响应式的?

有什么理由不在 vue3 中使用