点击登录,精彩内容等着你

vue3+vite进行setup语法糖的keep-alive的使用

全栈侠客

2023-01-03
vue3采用新的setup语法糖,导致keep-alive总是失效,排除了很多可能行之后,发现原来是setup的用法,导致组件无法表示name属性,从而引起keep-alive无法匹配到对应需要缓存的include的组件名称

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

一、问题描述

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

  1. //对应keep-alive的代码
  2. <Content class="i-layout-content i-scrollbar">
  3. <router-view #default="{ Component }">
  4. <transition name="fade" mode="out-in">
  5. <keep-alive :include="keepAlive">
  6. <component :is="Component" v-if="showRouter" />
  7. </keep-alive>
  8. </transition>
  9. </router-view>
  10. </Content>
  • :include=”keepAlive”为一个数组,标识需要进行状态保存的组件的name的数组
  • 在路由定义,已经明确给对应组件定义了name属性:name=’config’
    1. {
    2. path: '/marbase',
    3. name: 'marbase',
    4. component: Main,
    5. children: [
    6. {
    7. path: 'base/config-main',
    8. name: 'config',
    9. component: () => import('@/views/marbase/base/config-main'),
    10. meta: { name: '系统配置' ,cache: true}
    11. }
    12. ]
    13. }

二、问题解决

由于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引入插件

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

3.组件命名

  1. <script setup name="config">
  2. </script>

三、组件name说明

  1. <script setup></script>

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

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

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

阅读 2375     最后编辑 2023-01-09 22:17
文章补充
评论(0) 发表新评论
  • ...暂无评论...

我是有底线的 评论与点赞5分钟更新一次
回复评论
取消关闭

请先登录