vue3踩坑记录(二) 关于router-link的tag属性问题

在 vue-router4 中再使用 tag 属性的话会报警告：

在 vue-routerv3.1.x 以上版本，新增 v-slot，推荐使用 custom、v-slot 代替 tag 属性

官方文档中的介绍是：<router-link> 是否应该将其内容包裹在 <a> 元素中，在使用 v-slot 创建自定义 RouterLink 时很有用。默认情况下，<router-link> 会将其内容包裹在 <a> 元素中，即使使用 v-slot 也是如此，传递自定义的 prop，可以去除这种行为。

例如：

<router-link to="/home" custom v-slot="{ navigate, href, route }">
  <a :href="href" @click="navigate">{{ route.fullPath }}</a>
</router-link>

将会渲染成 <a href="/home">/home</a>

<router-link to="/home" v-slot="{ route }">
  <span>{{ route.fullPath }}</span>
</router-link>

渲染成 <a href="/home"><span>/home</span></a>

 

参考链接：https://router.vuejs.org/zh/api/#custom