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,
...
})