vue3 keep-alive

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="includeList">
      <component :is="Component"></component>
    </keep-alive>
  </router-view>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data () {
    return {
      includeList: []
    }
  },
  watch: {
    $route (to) {
      // 监听路由变化，把配置路由中keepAlive为true的name添加到include动态数组中
      // vue的export name和router name要一样keep-alive才能生效
      if (to.meta && to.meta.keepAlive && this.includeList.indexOf(to.name) === -1) {
        this.includeList.push(to.name)
        this.includeList = Object.assign([], this.includeList)
      }
    }
  }
}
</script>

如果缓存没有生效，请对比vue page 的export name 和 router 定义的 name 是否一样，一样才能生效。