vue动态面包屑路由组件实现

vue动态面包屑路由组件实现，无污染、易配置

这几天开发一个vue项目，因为页面非常多，而且有面包屑需求

开始想法：<适用于有面包屑的页面少的情况> 每个页面用vue路由传参实现，每次跳转传参，页面根据参数设置面包屑路由；

后来想法：规划好路由，将路由和面包屑一一对应起来，页面加载后解析路由，组合成面包屑即可（如下图），路由的名称是对应起来添加到配置中

下面是我的两种思路和组件实现（至于面包屑的样式实现并不难，这里直接用elemetUI组件的，我主要是说动态面包屑思路,并不是面包屑样式，如果UI组件不同，只需要自己做一些简单修改即可）：

实现：
breadBox1.0.vue：

优点：插拔轻松，容易配置（样式现在基于elementUI，完全可以改成任意面包屑组件）
直接将breadBox放在 router/index.js 的路由中间即可，当然，上一层组件模块要加上

image.png

v1.0效果

最后：上面的思路亲测可行，配合vue-router的path和redirect用的不错，但考虑到可能会出现重复路由配置过多，又写了一版兼容开始的想法，
当然这次吸取教训，将配置路由也提了出来。
更适合于路由没有规划的项目，拿来即用。

breadBox2.0.vue：

V2.0效果