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>

这样就可以了,解决! 

 

 

Logo

前往低代码交流专区

更多推荐