项目场景:
项目场景:谷粒学院项目,使用unxt前台框架做项目
问题描述
使用标签时遇到的警告,虽然不影响运行,但是看着很不舒服!
WARN [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.
报错处的代码如下
<router-link to="/course" tag="li" active-class="current" >
<a>课程</a>
</router-link>
<router-link to="/teacher" tag="li" active-class="current" >
<a>名师</a>
</router-link>
<router-link to="/article" tag="li" active-class="current" >
<a>文章</a>
</router-link>
<router-link to="/qa" tag="li" active-class="current">
<a>问答</a>
</router-link>
原因分析:
从vue官网看到vue4.x中tag被移除
解决方案:
根据官网提供的解决方法成功解决
<router-link to="/" custom v-slot="{ navigate }">
<li @click="navigate" @keypress.enter="navigate" role="link">
<a>首页</a>
</li>
</router-link>
<router-link to="/course" custom v-slot="{ navigate }">
<li @click="navigate" @keypress.enter="navigate" role="link">
<a>课程</a>
</li>
</router-link>
<router-link to="/teacher" custom v-slot="{ navigate }">
<li @click="navigate" @keypress.enter="navigate" role="link">
<a>名师</a>
</li>
</router-link>
<router-link to="/article" custom v-slot="{ navigate }">
<li @click="navigate" @keypress.enter="navigate" role="link">
<a>文章</a>
</li>
</router-link>
<router-link to="/qa" custom v-slot="{ navigate }">
<li @click="navigate" @keypress.enter="navigate" role="link">
<a>问答</a>
</li>
</router-link>
但要注意<a>
标签不要忘了,不然😣😣字体就会变得不一样了