谷粒学院项目遇到的bug。vue4.x中因tag被移除,<router-link>产生的警告

项目场景:

项目场景:谷粒学院项目,使用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被移除
vue官网看到


解决方案:

根据官网提供的解决方法成功解决

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

没有warn了
前台页面
但要注意<a>标签不要忘了,不然😣😣字体就会变得不一样了
在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值