fix: 🐛 (keep-alive)重构缓存机制

- 移除 KeepCache 组件，直接在 AppMain 中实现缓存逻辑

- 将 fullPath 做为组件缓存的 name

src/views/demo/multi-level/children/children/level3-1.vue

@@ -1,14 +1,23 @@
 <template>
-  <div flex flex-col gap-20px>
-    <el-alert :closable="false" title="菜单三级-1" type="error" />
-    <el-input v-model="value" placeholder="缓存测试" />
-    <ToDetail />
+  <div class="app-container">
+    <div flex flex-col gap-20px>
+      <MultiLevel1 />
+      <MultiLevel2 />
+      <el-alert :closable="false" title="菜单三级-1" type="error" />
+      <el-input v-model="value" placeholder="缓存测试" />
+      <ToDetail />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
 import ToDetail from "./detail";
+import MultiLevel1 from "../../level1.vue";
+import MultiLevel2 from "../level2.vue";
 
 defineOptions({ name: "MultiLevel31" });
 
 const value = ref("");
+onMounted(() => {
+  console.log("Multilevel31 onMounted");
+});
 </script>

src/views/demo/multi-level/children/children/level3-2.vue

@@ -1,14 +1,23 @@
 <template>
-  <div flex flex-col gap-20px>
-    <el-alert :closable="false" title="菜单三级-2" type="warning" />
-    <el-input v-model="value" placeholder="缓存测试" />
-    <ToDetail />
+  <div class="app-container">
+    <div flex flex-col gap-20px>
+      <MultiLevel1 />
+      <MultiLevel2 />
+      <el-alert :closable="false" title="菜单三级-2" type="warning" />
+      <el-input v-model="value" placeholder="缓存测试" />
+      <ToDetail />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import ToDetail from "./detail";
+import MultiLevel1 from "../../level1.vue";
+import MultiLevel2 from "../level2.vue";
 
 defineOptions({ name: "MultiLevel32" });
 const value = ref("");
+onMounted(() => {
+  console.log("Multilevel32 onMounted");
+});
 </script>

src/views/demo/multi-level/children/level2.vue

@@ -1,10 +1,13 @@
 <template>
-  <div flex flex-col gap-20px>
-    <el-alert :closable="false" title="菜单二级" type="success" />
-    <KeepCache />
-  </div>
+  <el-alert :closable="false" title="菜单二级" type="success" />
+  <el-input v-model="value" placeholder="缓存测试" />
 </template>
 <script setup lang="ts">
-import KeepCache from "@/components/KeepCache/index.vue";
 defineOptions({ name: "MultiLevel2" });
+
+const value = ref("");
+
+onMounted(() => {
+  console.log("MultiLevel2 mounted");
+});
 </script>

src/views/demo/multi-level/level1.vue

@@ -1,21 +1,10 @@
 <template>
-  <div p-30px>
-    <el-link
-      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/multi-level/level1.vue"
-      type="primary"
-      target="_blank"
-      class="mb-10"
-    >
-      示例源码 请点击>>>>
-    </el-link>
-
-    <div flex flex-col gap-20px>
-      <el-alert :closable="false" title="菜单一级" />
-      <KeepCache />
-    </div>
-  </div>
+  <el-alert :closable="false" title="菜单一级" />
 </template>
 <script setup lang="ts">
-import KeepCache from "@/components/KeepCache/index.vue";
 defineOptions({ name: "MultiLevel1" });
+
+onMounted(() => {
+  console.log("MultiLevel1 mounted");
+});
 </script>