vue多级路由使用keep alive无法缓存

在这里将他二级以上的路由扁平化即可

路由规则：

 
import Layout from '../components/Layout/index.vue'
import COM from '../components/index.vue'
{
        path:'home'',
        name:'home',
        component:Layout,
        children:[
            {
                path:'/index',
                name:'index',
                component:COM,
                children:[
                    { path:'menu',
                    name:'menu',
                    component:()=>import('@/views/menu/index.vue'),
                    meta:{
                        title:"menu",
                        icon:'',
                        affix: true,  // 加入保护
                        keepAlive:true,
                    }
                    },
                    { path:'/role',
                    name:'role',
                    component:()=>import('@/views//role/index.vue'),
                    meta:{
                        title:"role",
                        icon:'',
                        affix: true,  // 加入保护
                        keepAlive:true,
                    }
                    }
                ]
            }
        ]
    }

然后/components/index.vue中写入

<template>
  <div>
     <router-view />
  </div>
</template>

<script>
export default {
 name: 'index'
}
</script>

<style>

</style>

定义拍扁方法

const handleKeepAlive = (to) => {
    // 判断目标路由记录是否大于2
    if (to.matched && to.matched.length > 2) {
      // 遍历路由记录，制作面包屑导航列表，并删除依赖于AppMain组件的中间路由，实现路由扁平化
      for (let i = 0; i < to.matched.length; i++) {
        const element = to.matched[i]
        // /* 从这里开始处理面包屑 */
        // if (to.meta.breadcrumb && element.name !== 'index') {
        //   ;(to.meta.breadcrumb).push({
        //     name: element.name,
        //     label: element.meta.label,
        //     type: element.meta.type
        //   })
        // }
        // if (!to.meta.breadcrumb) {
        //   to.meta.breadcrumb = []
        // }
        // /* 从这里结束处理面包屑 */
        if (element.components.default.name === 'index') {
            
           let data= to.matched.splice(i, 1)
           console.log(data);
          handleKeepAlive(to)
        }
      }
    } else {
      // 当路由已经扁平化完毕的时候，将目标路由自身加入面包屑中
      /* 从这里开始处理面包屑 */
    //   const toBreadcrumb = to.meta.breadcrumb
    //   if (!toBreadcrumb) return
    //   const isToInToBreadcrumb = toBreadcrumb.some(
    //     (item) => item.name === to.name
    //   )
    //   if (!isToInToBreadcrumb) {
    //     ;(to.meta.breadcrumb).push({
    //       name: to.name,
    //       label: to.meta.label,
    //       type: to.meta.type
    //     })
    //   }
      /* 从这里结束处理面包屑 */
    }
  }

然后在前置守卫中执行拍扁方法

router.beforeEach(async (to, from, next) => {
handleKeepAlive(to)
)}

至此，就可以缓存了