From 628fd9fafc88c70f84ed02a3c896f345c147ceb8 Mon Sep 17 00:00:00 2001
From: wangshuai <shuai16.wang@dhc.com.cn>
Date: Mon, 22 May 2023 13:34:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=B7=AF=E7=94=B1=E7=BC=93?=
 =?UTF-8?q?=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 74 +++++++++++++++++++++++++++++++++--------------------
 1 file changed, 46 insertions(+), 28 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1b7e5f1..02d5ce1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,35 +9,13 @@
     </div>-->
 
     <router-view v-slot="{ Component }">
-      <component
-        :is="Component"
-        v-if="
-          !$route.meta ||
-          ($route.meta &&
-            ($route.meta.notKeepAlive ||
-              $route.meta.notKeepAlive === undefined))
-        "
-      />
-
-      <div
-        v-if="
-          !(
-            !$route.meta ||
-            ($route.meta &&
-              ($route.meta.notKeepAlive ||
-                $route.meta.notKeepAlive === undefined))
-          )
-        "
-      >
-        <keep-alive>
-          <component :is="Component" />
-        </keep-alive>
-      </div>
+      <keep-alive :include="componentNameList">
+        <component :is="Component" class="x-component" />
+      </keep-alive>
     </router-view>
 
-    <van-sticky position="bottom" class="bg-red">
-      <x-footer></x-footer>
-    </van-sticky>
+    <x-footer></x-footer>
+
     <!--    未来可能需要封装组件-->
   </div>
 </template>
@@ -51,6 +29,7 @@ import { $commonService0, testFun } from "@/app-import";
 
 // console.log(useRouter());
 const $route = useRoute();
+const router = useRouter(); //用来进行路由跳转
 
 console.log("window.$commonService", window.$commonService);
 // 推荐使用 $commonService
@@ -65,11 +44,50 @@ const title = ref("");
 // 生命周期
 // 组件被挂载时
 onMounted(() => {});
+////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// 获取缓存组件
+const componentNameList: any = ref([]);
+getKeepAlive(router.options.routes as object[]);
+
+// console.log("componentNameList",componentNameList)
+
+function getKeepAlive(routesArr: object[]) {
+  // console.log(routesArr)
+  routesArr.forEach((item: any) => {
+    if (
+      !item.meta ||
+      item.meta.notKeepAlive === undefined ||
+      item.meta.notKeepAlive === false
+    ) {
+      // console.warn('item',item)
+      // console.warn('item.component',item.component)
+      if (item.component) {
+        componentNameList.value.push(
+          getComponentName(item.component.toString())
+        );
+      }
+    }
+    // 是否有子级
+    if (item.children) {
+      getKeepAlive(item.children);
+    }
+  });
+}
+
+// 获取组件名
+function getComponentName(url: string) {
+  const regex = /\/([^\/]+)\.(?=[^\/]*$)/;
+  const match = regex.exec(url); // 执行正则匹配
+  if (match) {
+    const name = match[1]; // 获取第一个捕获组的值
+    return name;
+  }
+  return "";
+}
 </script>
 
 <style lang="scss">
 @import "src/styles/index";
-
 body {
   min-height: 100vh;
   font-size: 16px;