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.vue
·
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>
这样就可以了,解决!
更多推荐
已为社区贡献1条内容
所有评论(0)