Breadcrumb 面包屑

显示当前页面的路径，快速返回之前的任意页面。

基础用法

适用广泛的基础用法。

<el-breadcrumb separator="/">
  <el-breadcrumb-item to="">首页</el-breadcrumb-item>
  <el-breadcrumb-item to="">活动管理</el-breadcrumb-item>
  <el-breadcrumb-item to="">活动列表</el-breadcrumb-item>
  <el-breadcrumb-item to="/nav/breadcrumb">面包屑导航</el-breadcrumb-item>
</el-breadcrumb>

手动跳转

关闭组件的自动跳转从而手动设置路由，这是复杂的应用常见的需求。

设置 prevent 会阻止组件默认的跳转， 你可以从 (next) 事件中收集每次跳转的路径。

<!--当然，你也可以将 prevent 分别设置在 item 项上，详见文末属性参考-->
<el-breadcrumb (next)="handle($event)" [prevent]="true">
  <el-breadcrumb-item to="/home">首页</el-breadcrumb-item>
  <el-breadcrumb-item to="/2">活动管理</el-breadcrumb-item>
  <el-breadcrumb-item to="/list">活动列表</el-breadcrumb-item>
  <el-breadcrumb-item to="/test">面包屑导航</el-breadcrumb-item>
</el-breadcrumb>
<script src="text">
// in component:
handle(path: string): void {
  console.log(path)
}
</script>

图标分隔符

通过设置 separator-class 可使用相应的 iconfont 作为分隔符，注意这将使 separator 设置失效

<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item to="">首页</el-breadcrumb-item>
  <el-breadcrumb-item to="">活动管理</el-breadcrumb-item>
  <el-breadcrumb-item to="">活动列表</el-breadcrumb-item>
  <el-breadcrumb-item to="/nav/breadcrumb">面包屑导航</el-breadcrumb-item>
</el-breadcrumb>

Breadcrumb Attributes

Breadcrumb Item Attributes