feat: add keepalive

src/App.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script>
-import { ElConfigProvider } from "element-plus";
-import zhCn from "element-plus/lib/locale/lang/zh-cn";
-import en from "element-plus/lib/locale/lang/en";
+import { ElConfigProvider } from "element-plus"
+import zhCn from "element-plus/lib/locale/lang/zh-cn"
+import en from "element-plus/lib/locale/lang/en"
 export default {
   components: {
     [ElConfigProvider.name]: ElConfigProvider
@@ -17,9 +17,9 @@ export default {
     currentLocale() {
       switch (this.$storage.locale?.locale) {
         case "zh":
-          return zhCn;
+          return zhCn
         case "en":
-          return en;
+          return en
       }
     }
   }

src/layout/components/AppMain.vue

@@ -1,25 +1,47 @@
 <template>
   <section class="app-main">
-    <router-view :key="key" v-slot="{ Component }">
-      <transition appear name="fade-transform" mode="out-in">
-        <keep-alive>
-          <component :is="Component" />
-        </keep-alive>
-      </transition>
+    <router-view>
+      <template #default="{ Component, route }">
+        <transition appear name="fade-transform" mode="out-in">
+          <keep-alive v-if="keepAlive" :include="getCachedPageList">
+            <component :is="Component" :key="route.fullPath" />
+          </keep-alive>
+          <component v-else :is="Component" :key="route.fullPath" />
+        </transition>
+      </template>
     </router-view>
   </section>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "vue";
+import {
+  ref,
+  unref,
+  computed,
+  defineComponent,
+  onBeforeMount,
+  getCurrentInstance
+} from "vue";
 import { useRoute } from "vue-router";
+import { useSettingStoreHook } from "/@/store/modules/settings";
 export default defineComponent({
   name: "AppMain",
   setup() {
+    let vm: any;
+    const keepAlive: Boolean = ref(
+      getCurrentInstance().appContext.config.globalProperties.$config?.keepAlive
+    );
     const route = useRoute();
     const key = computed(() => route.path);
 
-    return { key };
+    const getCachedPageList = computed((): string[] => {
+      if (!unref(keepAlive)) {
+        return [];
+      }
+      return useSettingStoreHook().cachedPageList;
+    });
+
+    return { key, keepAlive, getCachedPageList };
   }
 });
 </script>

src/store/modules/settings.ts

@@ -5,13 +5,16 @@ import { store } from "/@/store";
 interface SettingState {
   title: string;
   fixedHeader: boolean;
+  cachedPageList: string[];
 }
 
 export const useSettingStore = defineStore({
   id: "pure-setting",
   state: (): SettingState => ({
     title: defaultSettings.title,
-    fixedHeader: defaultSettings.fixedHeader
+    fixedHeader: defaultSettings.fixedHeader,
+    // 需要开启keepalive的页面数组，里面放页面的name即可
+    cachedPageList: ["editor"]
   }),
   getters: {
     getTitle() {