vue-router想要面包屑效果,直接使用children属性是不行的,原因是面包屑的祖先后代关系并不一定是vue-router的祖先后代路由关系,可能在路由层面是平级关系,所以不能直接通过children属性来定义面包屑关系

对于每一个路由的面包屑数组放到meta中我觉得比较合适,这样在生成面包屑组件的时候,直接使用当前路由中的面包屑数组来生成就可以了

我的实现方案是对于定义的routes重新定义一下结构规范,引入一个新的属性 breadcrumbsChildren来表示这个属性里面的数组是父路由的面包屑后代，然后使用一个转化函数将routes转化为标准的routes数据

数据结构

let routes = [{

path: '0',

breadcrumbsChildren: [{

path: '0-b',

children: [{

path: '0-b-0',

}]

}],

children: [{

path: '0-0',

},

{

path: '0-1',

},

{

path: '0-2',

breadcrumbsChildren: [{

path: '0-2-b-0'

}]

}

]

},

{

path: '1'

},

{

path: '2',

children: [{

path: '2-0'

},

{

path: '2-1'

}

],

breadcrumbsChildren: [{

path: '2-b-0'

}, {

path: '2-b-1'

}, {

path: '2-b-2',

breadcrumbsChildren: [{

path: '2-b-2-b-0'

}, {

path: '2-b-2-b-1'

}],

children: [{

path: '2-b-2-0'

}, {

path: '2-b-2-1'

}]

}]

},

];

转化函数

function transformRoutes(routes){

for(let i = 0;i

_breadcrumbs(routes[i],[]);

}

for(let i = 0;i

_flat(i,routes);

}

function _breadcrumbs(route,breadcrumbs){

route.meta = route.meta||{};

route.meta.breadcrumbs=[...breadcrumbs,route];

(route.breadcrumbsChildren||[]).forEach(breadcrumbsChild => {

_breadcrumbs(breadcrumbsChild,route.meta.breadcrumbs)

});

(route.children||[]).forEach(child => {

_breadcrumbs(child,route.meta.breadcrumbs)

});

}

function _flat(i,routes){

const route = routes[i];

if(route.breadcrumbsChildren){

routes.splice(i+1,0,...route.breadcrumbsChildren);

delete route.breadcrumbsChildren;

}

for(let i = 0;i

_flat(i,route.children);

}

}

}

真实使用

let routes = [{path:'/',components:()=>import('./index.vue')}...];

transformRoutes(routes);

const router = new VueRouter({

routes

});

new Vue({

router,

...

})