vue3 + vite + ts 路由嵌套如何正确使用keep-alive

注意： 本次使用的vue版本是"vue^3.4.25",vite版本是 "vite": "^4.1.4"

第一步

1. 安装vite-plugin-vue-setup-extend插件，此插件作用是在使用setup语法糖时定义页面名称，例如：

<script setup lang="ts" name="Test"></script>
需要在vit配置文件中引入插件
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
 plugins: [VueSetupExtend()]
 这一步不做其实也没关系，只要你在vue devtool插件那里看到渲染的页面名称跟你需要缓存的名字对的上就可以了

第二步 2.项目中，我们经常使用到嵌套路由，所以对router-view需要进行处理

页面在main组件中进行keepalive配置
keepalive有三个属性：exclude配置不需要缓存的页面name，include配置需要缓存的页面name，max表示最多能缓存多少个页面
 <router-view>
    <template #default="{ Component, route }">
        <keep-alive >
             <component v-if="$route.meta.keepAlive" :is="Component" :key="route.fullPath" />
        </keep-alive>
         <component v-if="!$route.meta.keepAlive" :is="Component" :key="route.fullPath" />
    </template>
</router-view>
在app.vue文件中无需处理
<router-view></router-view>

第三步 3. 路由文件配置

meta属性添加keepAlive字段，true代表开启缓存，字段不存在或者值为false代表不需要缓存，
name属性非常关键，使用过vue2的就知道了,DDDD!!!!
{
        path: '/main/test',
        name: 'Test',
        component: () => import('@/views/test/test.vue'),
        meta: {
          title: '测试页',
          titleKey: 'test',
          keepAlive:true
        }
      },

总结：有时候插件版本与vue3版本不兼容，所以大家需要留意一下哦！