关联项目：leanboot-vue3,leanboot-micro

一、问题描述

在使用keep-alive进行组件的状态保存的过程中，由于使用setup的语法糖，导致keep-alive失效

//对应keep-alive的代码
<Content class="i-layout-content i-scrollbar">
    <router-view #default="{ Component }">    
        <transition name="fade" mode="out-in">
            <keep-alive :include="keepAlive">
                <component :is="Component" v-if="showRouter" />
            </keep-alive>
        </transition>
    </router-view>
</Content>

• :include=”keepAlive”为一个数组，标识需要进行状态保存的组件的name的数组
• 在路由定义，已经明确给对应组件定义了name属性：name=’config’

  {
    path: '/marbase',
    name: 'marbase',
    component: Main,
    children: [
        {
            path: 'base/config-main',
            name: 'config',
            component: () => import('@/views/marbase/base/config-main'),
            meta: { name: '系统配置' ,cache: true}
        }
    ]
  }

二、问题解决

由于setup语法糖，对应的组件无法标识其name，所以导致keep-alive无法获取到展示组件的name，无法匹配是否进行状态保存

1.安装vite插件vite-plugin-vue-setup-extend

npm i vite-plugin-vue-setup-extend
或
yarn add vite-plugin-vue-setup-extend

2.vite.config.js引入插件

import vueSetupExtend from 'vite-plugin-vue-setup-extend'
//1.解决setup语法糖的使用keep-alive的插件
vitePlugins.push(vueSetupExtend());

3.组件命名

<script setup name="config">
</script>

三、组件name说明

<script setup></script>

以上使用setup的语法糖的写法，其默认自动会生成name值为组件文件的名称，如这个组件是Menu.vue
那么其name默认值为Menu,当显式指定name=”config”的时候，就会自动修改为指定的name

具体完整代码，请参考leanboot-vue3

关注我，精益编程，助你学编程快一点