_index.js
由于面包屑组件有两部分，因此有一个特殊的_index.js来处理这个事情，这是为了确保单独导出这个组件的时候还是可以正常使用。如果在打包整个element-ui时，会单独打包packages里的两个文件夹breadcrumb和breadcrumb-item，这是整套机制比较有趣的地方。
import ElBreadcrumb from './src/breadcrumb';
import ElBreadcrumbItem from './src/breadcrumb-item.vue';
export default function install(Vue) {
Vue.component(ElBreadcrumbItem.name, ElBreadcrumbItem);
Vue.component(ElBreadcrumb.name, ElBreadcrumb);
};
export {
ElBreadcrumb,
ElBreadcrumbItem
};
Breadcrumb
首先是breadcrumb.vue部分，这是整个面包屑组件的容器。
整体
<template>
<div class="el-breadcrumb">
<slot></slot>
</div>
</template>
可以看出来就是简单的一个div.el-breadcrumb作为包裹，里面放置一个slot，这将是breadcrumb-item。
分隔符
面包屑的分割符是可以定制的。通过传递sepearator这一prop即可。
props: {
separator: {
type: String,
default: '/'
}
}
Breadcrumb-item
然后是每一个具体的子项目，写在breadcrumb-item.vue里面。
整体
<template>
<span class="el-breadcrumb__item">
<span
class="el-breadcrumb__item__inner"
ref="link">
<slot></slot>
</span>
<span
class="el-breadcrumb__separator">
{{separator}}
</span>
</span>
</template>
首先，最外面是一个div.el-breadcrumb__item包裹，里面是两个span，一个是具体的内容，一个是分隔符。
inner
里面slot用于我们自定义连接的具体形式。而ref是对这个span进行一个引用，一会儿会用到。
<span
class="el-breadcrumb__item__inner"
ref="link">
<slot></slot>
</span>
separator
另一个span是分割线的位置，其中的内容是从父级获得的。
<span
class="el-breadcrumb__separator">
{{separator}}
</span>
script
这个组件主要部分的实现在script里面，因此我们重点分析一下这里。首先是两个prop，用来配置路由的信息。
props: {
to: {},
replace: Boolean
},
然后，data里面只有一个separator，将在mounted的时候被设置，最主要的逻辑在mounted，因此我们重点分析一下。
mounted() {
this.separator = this.$parent.separator; // 获取父组件的separator
var self = this; // 保存this对象
if (this.to) { // 如果有to
let link = this.$refs.link; // 获取link的引用
link.addEventListener('click', _ => { // 绑定click事件
let to = this.to;
// 根据replace的值决定是replace还是push，这会影响history的记录
self.replace ? self.$router.replace(to)
: self.$router.push(to);
});
}
}
这部分写代码的人可能有点粗心，先定义了self来引用this，然后又混用，其实在这里因为使用了箭头表达式，其实并没有改变this，无需使用self来引用this。此外，对于这种嵌套的组件，其实可以进行一定的检查来确保使用正确。
