去掉router-link文字的下划线
哦买噶,router-link会带下划线,嘤嘤嘤,找了半天才发现QAQ我应该不是最后才知道的吧!<router-link to="check"><span class="one"><i class="el-icon-arrow-left"></i>返回<span class="two">未审核图册</span></spa
·
我们可能遇到这种情况:明明没有用下划线样式,没有用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进行跳转不会跳转到新的页面,不会重新渲染,它会选择路由所指的组件进行渲染
更多推荐
已为社区贡献5条内容
所有评论(0)