网上有许多办法，终归没有一个能解决我的问题，经过一天多的研究，我终于做出来了，细自己的项目有效，且不需要大的改动，适合已经完成的项目调整改动
路由三层：

第一层路由代码

   <router-view></router-view>

第二层路由代码

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

第三层路由代码

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

路由配置

const Router = createRouter({
         history: createWebHashHistory(),
         routes: [{
             //每一个路由都增加这个属性
              meta:{   
                       keepAlive: true //如果需要缓存就是true 不需要缓存就是false
                     }, 
             }]
       })  

其他说明

1. vue3 + ts + vue-router4
2. 亲测有效，不需要每个组件命令

新增问题

1. 所有的页面都必须用onActivated ，不能用onMounted ,不然会循环调用许多次