javascript - 在 vuejs 中将旧代码修改为 vue router 4
问题描述
在 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 建议?
解决方案
根据's的文档<router-link>
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>
在这种情况下它本身没有链接激活。
推荐阅读
- android - 如何使用 Firebase 动态链接在 android 中获取短 URL 链接?
- android - 如何使用 lint.xml 或 gradle 脚本忽略 Android lint 中的拼写检查?
- database - isnull(table_name) 的计数为 0,但该表中的许多行没有值。如何获得正确的计数?
- javascript - 如何在不使用 PHP 中的 cookie 或 JS 的情况下将数据发送到另一个页面?
- node.js - 如何导出在 .then() 函数中声明的变量
- php - 如何在流明中对表过滤器功能进行单元测试
- c# - 如何确保返回是一个数组?
- c# - 根据字符串输入查询列表
- scala - 通过任一/析取 Scala 处理多种错误类型
- java - 使用 selenium 在 bigbasket 的购物车中搜索和添加产品