breadcrumb 根据路由_vue动态面包屑路由组件实现

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

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

开始想法： 每个页面用vue路由传参实现，每次跳转传参，页面根据参数设置面包屑路由；

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

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

实现：

breadBox1.0.vue：

您的位置：

{ {item.name}}

export default {

//面包屑解决方案，此方法只适用于面包屑与路由显示顺序一致，例如path：01/02/03 面包屑也是01/02/03

data() {

return {

//手动配置项：breadListIm为路由与面包屑名称对应关系,breadLoadName为面包屑组件路由

breadLoadName: '/breadBox',

breadListIm: [

{

path: '01',

name: '一级'

},

{

path: '02',

name: '二级'

},

{

path: '03',

name: '三级'

},

],

breadListLast: []

};

},

methods: {

loadChange() {

this.breadListLast = []

if (this.$route.path.indexOf(this.breadLoadName) ==&