vue3 使用keepalive

//vue3.0的App.vue配置方法如下：
<template>
  <!-- vue3.0配置 -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  </router-view> 
</template>

 

在对应的路由上添加meta属性来设置页面是否要使用缓存，如下：

{
  path: "/keepAliveTest",
   name: "keepAliveTest",
   meta: {
       keepAlive: true //设置页面是否需要使用缓存
   },
   component: () => import("@/views/keepAliveTest/index.vue")
 },