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