去掉router-link文字的下划线

我们可能遇到这种情况：明明没有用下划线样式，没有用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进行跳转不会跳转到新的页面，不会重新渲染，它会选择路由所指的组件进行渲染