src/App.vue

@@ -9,13 +9,35 @@
     </div>-->
 
     <router-view v-slot="{ Component }">
-      <keep-alive :include="componentNameList">
+      <component
-        <component :is="Component" class="x-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>
     </router-view>
 
+    <van-sticky position="bottom" class="bg-red">
       <x-footer></x-footer>
-
+    </van-sticky>
     <!--    未来可能需要封装组件-->
   </div>
 </template>
@@ -29,7 +51,6 @@ import { $commonService0, testFun } from "@/app-import";
 
 // console.log(useRouter());
 const $route = useRoute();
-const router = useRouter(); //用来进行路由跳转
 
 console.log("window.$commonService", window.$commonService);
 // 推荐使用 $commonService
@@ -44,50 +65,11 @@ 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;