vue中keep-alive多级路由缓存问题

1.问题描述

对账中心当便捷导航菜单最后两个是同一模块且是三级及以上菜单时，正常切换两个便捷页签时是可以正常缓存的，但删除最后一个页签时，此时另一个页签页面此时已经不缓存了。

2.原因分析

keep-alive默认支持缓存是两级，对三级及以上层级的页面缓存失效，之前的处理方式为： 监听到路由变化后，将当前的路由的标识及父级标识一起存起来，当多个页面存在时，关闭其中一个页面，也会将本身及父级的标识一起删掉，此时数组中已无父级标识，其他同级页面的缓存将失效。

3.解决思路

将路由配置表的所有路由拆成两个操作，一是保持原样用于菜单的展示，二是对路由配置表进行扁平化处理，将所有的路由处理成二级路由，这样keep-alive就能默认支持缓存了。

4.处理过程

拿到完整的路由配置

const modules = []files.keys().forEach(key => {    const filesObj = files(key).default || files(key)    Object.keys(filesObj).forEach(keyOne => {        modules.push(filesObj[keyOne])    })})

操作完成路由配置

export const menuList = modules;  // 用于菜单展示
下载地址:
vue拖拽添加的简单实现
Vue3如何理解ref toRef和toRefs的区别