项目实训——vue中修改router-link的默认样式

发现个神奇的事…

<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的写法取消。
？