Nuxt3 路由缓存的问题 keepalive 的 include 属性问题

不说废话，开搞。

在 definePageMeta 方法里面设置 keepalive:true 会缓存当前路由下面所有的子路由也可以传入对象

{
    include?  // 包含的组件 值为数组 数组的item为子路由组件的name属性值
    exclude? // 不包含的组件 值为数组 数组的item为子路由组件的name属性值
    max? // 最大缓存数量 值为Number
}

<!--父组件-->
<NuxtLayout>
  <div class="index">
    <div style="padding: 20px 20px 0;">
      <NuxtLink to="/a">
        <el-button type="primary">A</el-button>
      </NuxtLink>
      &nbsp;
      <NuxtLink to="/b">
        <el-button type="primary">B</el-button>
      </NuxtLink>
    </div>
    <br>
    <NuxtPage/>
  </div>
</NuxtLayout>

<script setup>
definePageMeta({
  keepalive: {
    include: ["233"]
  },
});
</script>

script setup 的组件需要用 defineOptions 来设置组件的 name 属性值

<!--子组件 A-->
<template>
  <div class="ipt-box">
    A：<el-input v-model="input" placeholder="Please input" />
  </div>
</template>

<script setup>
import { ref } from "vue";

const input = ref("");

defineOptions({
  name: "233"
});
</script>

已经实现了，看下效果，A组件设置缓存了 B组件没有设置