feat: 加上keepAlive全局开启配置

src/config/index.ts

@@ -2,4 +2,7 @@ import * as localeConfig from './locale';
 import loginConfig from './login';
 import themeConfig from './theme';
 const settingKey = 'me-config';
-export { loginConfig, localeConfig, themeConfig, settingKey };
+const settingConfig = {
+  openKeepAlive: true, // 是否开启KeepAlive缓存
+};
+export { loginConfig, localeConfig, themeConfig, settingKey, settingConfig };

src/layout/components/page.vue

@@ -13,25 +13,28 @@
 
 <script setup lang="ts" name="LayoutPage">
 import { MeKeepAliveProps } from '@/components/meKeepAlive';
+import { settingConfig } from '@/config';
 import { useRouteStore } from '@/store';
-import { PropType, TransitionProps } from 'vue';
+import { ComputedRef, PropType, TransitionProps } from 'vue';
 const props = defineProps({
   transition: Object as PropType<TransitionProps>,
 });
 const routeStore = useRouteStore();
-const keepAliveProps = computed<MeKeepAliveProps>(() => ({
-  max: 30,
-  includeKey: [...routeStore.cacheFullPath],
-}));
-
-const route = useRoute();
-watch(
-  route,
-  () => {
-    if (!route.meta.noCache) {
-      routeStore.cacheFullPath.add(route.fullPath);
-    }
-  },
-  { immediate: true },
-);
+let keepAliveProps: undefined | ComputedRef<MeKeepAliveProps>;
+if (settingConfig.openKeepAlive) {
+  keepAliveProps = computed<MeKeepAliveProps>(() => ({
+    max: 30,
+    includeKey: [...routeStore.cacheFullPath],
+  }));
+  const route = useRoute();
+  watch(
+    route,
+    () => {
+      if (!route.meta.noCache) {
+        routeStore.cacheFullPath.add(route.fullPath);
+      }
+    },
+    { immediate: true },
+  );
+}
 </script>

src/store/modules/setting.ts

@@ -5,7 +5,7 @@ import { mixColor } from '@/utils/helper';
 const { css } = useStyleTag('');
 const useSettingStore = defineStore('setting', {
   state: () => ({
-    themeConfig: useStorage(`${settingKey}-theme`, themeConfig),
+    themeConfig: useStorage(`${settingKey}-theme`, themeConfig, localStorage, { mergeDefaults: true }),
     locale: useStorage(`${settingKey}-locale`, localeConfig.localeSetting.locale ?? 'zh-cn'),
     elLocale: undefined as Language | undefined,
     isDark: useDark({ storageKey: 'me-color-dark-scheme' }),

src/views/dashboard/index.vue

@@ -6,4 +6,11 @@
 </template>
 <script setup lang="ts" name="DashboardIndex">
 const value = ref('');
+const fullPath = useRoute().fullPath;
+onActivated(() => {
+  console.log('active', fullPath);
+});
+onDeactivated(() => {
+  console.log('deactivated', fullPath);
+});
 </script>