vue3实现切换组件缓存（keepAlive）

 页面中使用keep-alive和component组件结合，通过特殊的<component> 元素来实现动态组件的用法：注意必须使用:key否则会报错

    <!--keep-alive实现组件缓存  -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive" :key="$route.name"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive" :key="$route.name"/>
  </router-view> 

路由配置时，需要配置好keepAlive:true

//route.js
 children: [{
                name: 'ExcelPreview',
                path: 'excelPreview',
                title: 'Data Spec 预览',
                component: ExcelPreview,
                meta: {
                    keepAlive: true,
                    authentication: true,
                    // 用于设置tab名
                    title: 'Data Spec 预览',
                }
            },
            {
                name: 'TXTResult',
                path: 'txtResult',
                title: '生成测试数据',
                component: TXTResult,
                meta: {
                    keepAlive: true,
                    authentication: true,
                    title: '生成测试数据',
                }
            },
            {
                name: 'GenerateCronjob',
                path: 'generateCronjob',
                title: '生成转码程序',
                component: GenerateCronjob,
                meta: {
                    keepAlive: true,
                    authentication: true,
                    title: '生成转码程序',
                }
            },
            {
                name: 'PDFCompare',
                path: 'pdfCompare',
                title: 'PDF文档对比',
                component: PDFCompare,
                meta: {
                    keepAlive: true,
                    authentication: true,
                    title: 'PDF文档对比',
                }
            },
            {
                name: 'ResourceUpdate',
                path: 'resourceUpdate',
                title: '资源更新管理',
                component: ResourceUpdate,
                meta: {
                    // 多个tab组件切换时缓存数据
                    keepAlive: true,
                    authentication: true,
                    title: '资源更新管理',
                }
            },
        ]

设置好这两个，页面组件就可以正常切换缓存