问题

项目中的keep-alive只能缓存一级和二级组件，多级嵌套的路由页面缓存没有生效。

原因

keep-alive实际就是根据组件的名称，如果即将渲染的组件名称命中存在缓存数组，那么直接取缓存里的组件进行渲染。也就是我们一个页面的渲染，是按一个一个组件来的，组件命中缓存则取缓存，如果没有缓存，则下面的子组件不再进行缓存命中的判断，重新渲染。
我们在路由上定义了name属性，以name和组件名称相对应的形式去判断路由跳转时当前组件是否销毁。实际上keep-alive就是根据组件名称去判断是否保活的，所以之所以多级路由没有生效的原因就显而易见了，多级路由我们有一个中间组件去作为路由容器，然而这个路由容器组件我们没有定义组件名，所以导致了没有办法缓存最后一层的组件。

解决方法

将二级以后的路由拍平

1
2
3
4
5
6
7
8
9
10
11
12
// 将树形结构转换成数组
treeToArray(tree) {
  let res = [];
  for (const item of tree) {
    const { children } = item;
    if (children && children.length) {
      res = res.concat(this.treeToArray(children));
    }
    res.push(item);
  }
  return res;
},