Vue使用实现多级缓存，无限缓存使用实现缓存。目前有三种方法方法一：在路由元信息中添加缓存ID：{path:'json',name:'json',meta:{...keepAlive:true...},component:()=>import('../views/components/json')},2.使用v-if判断是否缓存此方法在早期版本中使用，当时没有include属性。这种方式虽然方便，但是会带来很多bug，比如不能使用，缓存不必要的布局组件，用来实现嵌套路由操作等等。不过，我有强迫症和不能接受无动态效果(￣(00)￣)所以这里着重介绍方法二（正在使用）：1.在路由元信息中记录包含keepAlive:true的路由，并设置该路由的name属性为在vuex中维护在一个keepAliveList:[]中。2、使用的include属性实现动态组件缓存。先说include属性。它的值可以是：字符串、正则表达式、数组。首先我们要知道keep-alive可以根据include中的值匹配到当前路由对应组件的name属性（！！不是路由的名字，是组件的名字）来判断该路由中的组件是否需要缓存。因此，我们只需要将需要缓存的路由组件的name数组传入keepAliveList:[]中即可包含，这样就可以这样使用但是：如果遇到嵌套的或者嵌套的路由（这是很常见的操作），这时候后面几层的组件缓存就会出现问题为例如，我有如下三层结构：{path:'/menu-1',name:'menu-1',//布局文件，用于实现多级嵌套组件访问，这是多级必须的路由访问组件：layout，children：[{路径：'menu-2'，名称：'menu-2'，组件：布局，子项：[{路径：'menu-3'，名称：'menu-3'，元：{keepAlive：true}，组件:()=>import('../views/components/menu-3.vue')}]}]}文件内容`layout.vue`我想访问menu-3，在路由中可视化可以这样看（布局不对，甘）：我们可以发现keep-alive只缓存到了第一层，也就是组件，而这个组件只是一个component，这显然不是我们想要的我们需要从提升无用组件，换句话说，将升级到的层可以缓存，这样怎么解决？需要对嵌套的进行扁平化，也就是在routingguard中增加一个方法来剔除无用的layout布局：//为什么要用afterEach而不是beforeEach？看handleKeepAliverouter.afterEach((to,from)=>{handleKeepAlive(to)}/***递归处理冗余布局：,*把需要访问的组件保留在第一个下面层索引：*@paramto*/functionhandleKeepAlive(to){if(to.matched&&to.matched.length>2){for(leti=0;i
