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" @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>

这样就可以了，解决！