解决qiankun切换子应用后vue3 keep-alive不生效问题

504 阅读1分钟

qiankun切换子应用后keep-alive缓存失效,通过vue devtools工具可以看到切换子应用后keep-alive节点被释放掉,查看代码是pkee-alive有v-if逻辑。

  • v-if需放在keep-alive里面

代码修改如下:

<router-view v-slot="{ Component }">
  <transition name="fade-transform" mode="out-in">
    <keep-alive>
      <component :is="Component" :key="$route.fullPath" v-if="$route.meta.keepAlive" />
    </keep-alive>
  </transition>
    <transition name="fade-transform" mode="out-in">
      <component :is="Component" :key="$route.fullPath" v-if="!$route.meta.keepAlive" />
    </transition>
</router-view>