参考 https://github.com/vuejs/core/pull/4339 自定义组件封装keep-alive

src/layout/components/AppMain.vue

@@ -1,27 +1,48 @@
 <template>
   <section class="app-main">
-    <router-view v-slot="{ Component }">
+    <router-view v-slot="{ Component, route }">
       <transition name="fade-transform" mode="out-in">
-        <!-- <keep-alive :include="cachedViews"> -->
-          <component :is="Component" :key="key" />
-        <!-- </keep-alive> -->
+        <keep-alive :include="cachedViews">
+          <component :is="wrap(route, Component)" :key="route.fullPath" />
+        </keep-alive>
       </transition>
     </router-view>
   </section>
 </template>
 
 <script>
-import { defineComponent } from 'vue';
+import { defineComponent, h } from 'vue';
 import store from '@/store';
+import { mapState } from 'pinia';
 
 export default defineComponent({
   name: 'AppMain',
   computed: {
+    ...mapState(store.tagsView, ['wrapperMap']),
     cachedViews() {
       return store.tagsView().cachedViews;
-    },
-    key() {
-      return this.$route.path;
+    }
+  },
+  methods: {
+    // 为keep-alive里的component接收的组件包上一层自定义name的壳.
+    wrap(route, component) {
+      let wrapper;
+      // 重点就是这里，这个组件的名字是完全可控的，
+      // 只要自己写好逻辑，每次能找到对应的外壳组件就行，完全可以写成任何自己想要的名字.
+      // 这就能配合 keep-alive 的 include 属性可控地操作缓存.
+      const wrapperName = route.name;
+      if (this.wrapperMap.has(wrapperName)) {
+        wrapper = this.wrapperMap.get(wrapperName);
+      } else {
+        wrapper = {
+          name: wrapperName,
+          render() {
+            return h('div', { className: 'vaf-page-wrapper' }, component);
+          }
+        };
+        this.wrapperMap.set(wrapperName, wrapper);
+      }
+      return h(wrapper);
     }
   }
 });

src/store/modules/tagsView.js

@@ -2,7 +2,8 @@ import { defineStore } from 'pinia';
 
 const getDefaultState = () => ({
   visitedViews: [],
-  cachedViews: []
+  cachedViews: [],
+  wrapperMap: new Map()
 });
 
 const getters = {};
@@ -41,6 +42,9 @@ const actions = {
   delCachedView(view) {
     const index = this.cachedViews.indexOf(view.name);
     index > -1 && this.cachedViews.splice(index, 1);
+    if (this.wrapperMap.has(view.name)) {
+      this.wrapperMap.delete(view.name);
+    }
   },
 
   delOthersViews(view) {
@@ -60,6 +64,11 @@ const actions = {
       // if index = -1, there is no cached tags
       this.cachedViews = [];
     }
+    this.wrapperMap.forEach((value, key) => {
+      if (view.name !== key) {
+        this.wrapperMap.delete(key);
+      }
+    });
   },
 
   delAllViews() {
@@ -73,6 +82,7 @@ const actions = {
   },
   delAllCachedViews() {
     this.cachedViews = [];
+    this.wrapperMap.clear();
   },
 
   updateVisitedView(view) {