vue3使用keep-alive做缓存

暂未整理，等待更新

文章目录

一、注意项
- 1.不生效原因
二、使用步骤
- 1.引入库
- 2.读入数据
总结

一、注意项

1.不生效原因

vue3无beforeRouteEnter，但可以写。<script lang="jsx">需要一致
:include="['experienceMaintenance', 'realTimeAlarm']"使用的vue页name，不是路由的name
需要使用:key=区分否则换错报错
在路由文件里面,将需要keep-alive的页面放在layout组件的children里面（如果不放在children里面keep-alive就不会生效）---layout组件就是你写keep-alive的那个组件

javascript 复制代码

  {{$route.meta}}-{{$route.meta.keepAlive}}
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component v-if="$route.meta.keepAlive" :key="$route.path" :is="Component" />
    </keep-alive>
    <component v-if="!$route.meta.keepAlive" :key="$route.path" :is="Component" />
  </router-view>

javascript 复制代码

  <router-view v-slot="{ Component }">
    <keep-alive :include="['experienceMaintenance', 'realTimeAlarm']">
      <component :is="Component"></component>
    </keep-alive>
  </router-view>

二、使用步骤

1.引入库

代码如下（示例）：

2.读入数据

总结

提示：这里对文章进行总结：