扁平路由匹配多级面包屑思路总结

我们的项目后期大概率会用到keepAlive，而keepAlive最多支持2层路由，多了话下边的层级就拿不到了，而我们的页面可能套的比较深，有3到4层的页面
为了使keepAlive生效，我选择将路由的层级控制到2层内，但是这个时候，我使用的面包屑又会匹配不成功，会一直只有两层，为了解决这个问题，我选择自己写一套匹配逻辑
其实思路很简单，就是将路由配置中的meta里边添加一个father属性，如下：

parent: {
	path: 'xxx',
	title: 'xxx'
}

原面包屑去匹配的时候，是通过路由对象中的matched属性去匹配的，那么这个时候我们将matched对象进行遍历，去查看路由配置里边的father属性，将path和title push到我们要进行v-for循环的对象中
但是我们也不能一股脑的将所有匹配到的路由信息全push进去，这样了话可能导致有些路由会重复被push，为了解决这种情况，我又在meta中添加了一个isBread属性，这个属性是布尔类型，只有在这个路由中配置了isBread，才有资格将其father push进去，大致的代码如下：

let routeList: any = []
matched.forEach((item: any) => {
  if (item.meta.father) {
    if (item.meta.isBread === true) {
      routeList.push({
        path: item.meta.father.path,
        title: item.meta.father.title
      })
    }
    routeList.push({
      path: item.path,
      title: item.meta.title
    })
  } else {
    routeList.push({
      path: item.path,
      title: item.meta.title
    })
  }
})

但是这个思路在有一些地方可能会有些问题，比如说三级的father或者更深一级的father，而这个时候matched里边却只有两个长度的对象。对于这种方法，我想到的思路是使用递归，对整个路由配置对象进行遍历，但是写起来稍微复杂，而上边的方法目前已经满足了自己的需求，所以也就没有再进行扩展