发现个神奇的事…

<el-menu-item index="1">
  <router-link to="/">首页</router-link>
</el-menu-item>
<el-menu-item index="2">
  <router-link to="/main">招聘信息</router-link>
</el-menu-item>
.router-link-active {
  text-decoration: none;
  color: #fff;
}
a {
  text-decoration: none;
  color: #fff;
}

router-link本质就是a标签,所以这么写能取消router-link 的默认样式
但是!!!!
如果这么写:

.router-link-active {
  text-decoration: none;
  color: #fff;
}
.router-link {
  text-decoration: none;
  color: #fff;
}

只能取消第一个el-menu-item的默认样式,不能取消第二个。尝试发现如果router-link里的to有跳到别的组件,如/main,则其默认样式不能被取消。只能采用第一种css的写法取消。

Logo

前往低代码交流专区

更多推荐