router-link tag屬性問題

router-link使用tag屬性出現警告問題,如圖所示

控制台錯誤消息為：

[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-routerv3.1.x以上版本，新增“

v-slot

”，推薦使用‘custom v-slot’代替‘tag="li"’

<router-link to="/about" custom v-slot="{ href, route, navigate, isActive, isExactActive }">
  <NavLink :active="isActive" :href="href" target="_blank" rel="external nofollow"  @click="navigate">{{ route.fullPath }}</NavLink>
</router-link>
           

解決方案：

Vue Router3.1.0以下 以前
<router-link to="/about" tag="li">About Us</router-link>

Vue Router3.1.0以上 現在
<router-link to="/about" custom v-slot="{ navigate }">
  <li @click="navigate" @keypress.enter="navigate" role="link">About Us</li>
</router-link>
           

這樣就可以了，解決！