0 环境
1 参考文档
2 前言
如下图：
先看效果，无论我怎么切换侧边栏的内容，首页和它图标一直在，然后还可以点击，进入首页，它的右侧是面包屑，记录着所有子菜单和菜单项的标题。
3 正文
这里先看ToolBarLeft.vue，找到第4行的Breadcrumb组件，v-show显示隐藏的判断，id后面没太用到。
现在进入Breadcrumb.vue，如下图：
先不看css，先看el-breadcrumb(第3行)，separator-icon分隔符，你可以使用默认图标，也可以找其他图标替代，看下面第二张图(官方demo)。
再看第4行，transition-group，并且绑定了name，之后的动画就会以breadcrumb开头，比如breadcrumb-enter-from。当点击菜单项时，仔细看，x轴是有动画的，但是找个下面的css代码，是没有对应的样式，在到common.scss中找，上面有链接，本地位置在src/styles/common.scss。如下图：
从第64行开始看，元素进入过渡的时间0.2s，元素进入过渡开始时的状态和离开过渡开始时的状态，设置的都算透明度为0，并且会向右边（X轴方向）偏移10个像素，目的是为了动画看着更加丝滑。
现在在回到Breadcrumb.vue，找到第5行，多个el-breadcrumb-item循环，每个里面对应一个图标+标题，参考下图。
这个for循环的breadcrumbList是第35行里breadcrumbList，它是怎么实现的呢，往下看36行，点进breadcrumbListGet，进入store后，再点getAllBreadcrumbList，如下图：
看这里的getAllBreadcrumbList，其实就是对menu树里的数据，进行遍历，每个result存着它们的path，以及对应父+它自己的对象，若有子项的递归，最后全存在result中。
最终的结果如下面：
每个path记录了，以数组的形式，由上至下，从0开始一个个的记录着它相关的祖宗十八代及自己。 目的是什么呢，就是这里面包屑的顺序呀。route.matched是一个包含了当前（激活的）路由的所有嵌套路径片段的路由记录数组，而这里最后那个元素就是我们点的path，通过这个path，得到对应的breadcrumbData，假如没有的话就是空数组。假如没有首页，breadcrumbData在索引为0的位置上加个首页对象。最后返回breadcrumbData。
因为这里breadcrumbList最后一个元素已经是当前页了，所以点击面包屑，对应的index将其排除。
4 总结
其实就是将menu树的数据转成对象。在这个对象里找有没有找到现在激活path，找到返回它的值，否则为空。找到了之后还要判断第一个元素是不是首页，不是第一个元素加个首页的path对象。最后返回。