修复路由缓存

src/App.vue

@@ -9,35 +9,13 @@
     </div>-->
 
     <router-view v-slot="{ Component }">
-      <component
+      <keep-alive :include="componentNameList">
-        :is="Component"
+        <component :is="Component" class="x-component" />
-        v-if="
+      </keep-alive>
-          !$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>
     </router-view>
 
-    <van-sticky position="bottom" class="bg-red">
+    <x-footer></x-footer>
-      <x-footer></x-footer>
+
-    </van-sticky>
     <!--    未来可能需要封装组件-->
   </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;