vue修改element面包屑样式
element面包屑默认后边的是浅颜色的，前边的是深色的，
现在UI设计图要修改成前面是浅色的，后面是深色的
如果直接修改样式会无法区分一级或者二级路由，用一下方法可以实现：
<el-breadcrumb separator="/">
<el-breadcrumb-item
v-for="(item, index) in breadList"
:key="index"
:to="{ path: item.path }"
:class="index==0&&breadList.length>1?'first_route':'two_route'"
>
{{ (item.meta.title != undefined) && item.path !== '/home' ? item.meta.title : null }}
</el-breadcrumb-item>
</el-breadcrumb>
这样就会给一级路由加上了first_route类名，给二级路由加上了two_route的类名，然后定义样式：文章来源：https://www.toymoban.com/news/detail-824104.html
我用的是scss文章来源地址https://www.toymoban.com/news/detail-824104.html
.el-bread-two{
::v-deep .el-breadcrumb__inner{
font-weight: 500 !important;
color: #21212B !important;
}
}
.el-bread-one{
::v-deep .el-breadcrumb__inner{
font-weight: 400;
color: #797979;
}
::v-deep .el-breadcrumb__inner.is-link:hover{
color: #797979;
}
}
到了这里，关于vue修改element面包屑样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[VUE学习]权限管理系统前端vue实现9-动态路由，动态标签页，动态面包屑](https://imgs.yssmx.com/Uploads/2024/02/541195-1.png)
