Vue3使用keep-alive实现组件缓存

一、代码结构

如图所示

如上图所示：有Home、About、User 三个组件 现在想保活 Home、About两个组件
在App.vue中代码如下：

<template>
  <div id="nav">
    <router-link to="/" style="margin-right:20px">首页</router-link>
    <router-link to="/about" style="margin-right:20px">关于</router-link>
    <router-link to="/user">用户</router-link>
   <router-view v-slot="{Component}">
    <keep-alive :include="includeList">
      <component :is="Component" />
    </keep-alive>
  </router-view>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent } from "vue";
export default defineComponent({
  name: "App",
  setup() {
    // 需要缓存的组件name值
    const includeList = ref(["About",'Home']);
    return {
      includeList,
    };
  },
});
</script>