我们可能遇到这种情况:明明没有用下划线样式,没有用a标签,为什么文字下面还会有下划线?

问题来了,可能是因为你用了router-link,这是很多小伙伴在做前端项目的时候会用到的路由跳转标签!!关键就在于:router-link会被浏览器渲染成a标签,也就是说我们如果要用css来控制的话,需要对a和router-link-active去掉下划线

 <router-link to="check">
      <span class="one">
        <i class="el-icon-arrow-left"></i>返回
        <span class="two">未审核图册</span>
      </span>
    </router-link>

在这里插入图片描述

下面我们来取消它,只需两步,药到病除
给它添加css样式控制

a{
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}

这里可能有小伙伴会疑惑,为什么还要控制a标签的样式?

router-link本质就是a标签的加强版

a标签

点击a标签从当前页面跳转到另一个页面

通过a标签跳转,页面就会重新加载,相当于重新打开了一个网页

router-link标签

通过router-link进行跳转不会跳转到新的页面,不会重新渲染,它会选择路由所指的组件进行渲染

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐