在layout下面加载子应用不能使用router-view的插槽，只能直接使用，判断如果为子应用直接使用router-view在主应用下的路由才使用插槽

main/src/layouts/index.vue

@@ -6,57 +6,59 @@
  * @LastEditTime: 2025-01-17 16:36:25
 -->
 <template>
-  <router-view v-slot="{ Component, route }">
+  <div class="layout">
-    <transition name="fade-slide" mode="out-in" appear>
+    <div class="layout-header">
-      <keep-alive v-if="isReload" :include="cacheRoutes">
+      <div class="layout-header-top">
-        <div class="layout">
+        <div class="layout-header-top-left">
-          <div class="layout-header">
+          <span>您好，欢迎来到农业产业服务平台</span>
-            <div class="layout-header-top">
+          <el-tag>运营大屏</el-tag>
-              <div class="layout-header-top-left">
+          <el-tag>产业服务APP</el-tag>
-                <span>您好，欢迎来到农业产业服务平台</span>
+          <el-tag>产业运营管理</el-tag>
-                <el-tag>运营大屏</el-tag>
+        </div>
-                <el-tag>产业服务APP</el-tag>
+        <div class="layout-header-top-right">
-                <el-tag>产业运营管理</el-tag>
+          <span>商家中心</span>
-              </div>
+          <span>个人中心</span>
-              <div class="layout-header-top-right">
+          <span>返回首页</span>
-                <span>商家中心</span>
+        </div>
-                <span>个人中心</span>
+      </div>
-                <span>返回首页</span>
+      <div class="layout-header-bottom">
-              </div>
+        <div class="layout-header-bottom-left">
+          <div class="layout-header-bottom-search">
+            <div class="title">农业产业服务平台</div>
+            <el-input v-model="keyword" placeholder="请输入关键词进行搜索"></el-input>
+            <el-button type="primary" @click="Search">搜索</el-button>
+          </div>
+          <el-menu ellipsis class="layout-header-bottom-menu" mode="horizontal">
+            <app-link v-for="(item, index) in meuns" :key="index" :to="item.path">
+              <el-menu-item>{{ item.label }}</el-menu-item>
+            </app-link>
+          </el-menu>
+        </div>
+        <div class="layout-header-bottom-right">
+          <div class="layout-header-bottom-right-qr">
+            <div class="layout-header-bottom-right-qr-img">
+              <img :src="qrImg" alt="" />
+              <p>下载数农App</p>
             </div>
-            <div class="layout-header-bottom">
+            <div class="layout-header-bottom-right-qr-img">
-              <div class="layout-header-bottom-left">
+              <img :src="qrImg" alt="" />
-                <div class="layout-header-bottom-search">
+              <p>打开数农小程序</p>
-                  <div class="title">农业产业服务平台</div>
-                  <el-input v-model="keyword" placeholder="请输入关键词进行搜索"></el-input>
-                  <el-button type="primary" @click="Search">搜索</el-button>
-                </div>
-                <el-menu ellipsis class="layout-header-bottom-menu" mode="horizontal">
-                  <app-link v-for="(item, index) in meuns" :key="index" :to="item.path">
-                    <el-menu-item>{{ item.label }}</el-menu-item>
-                  </app-link>
-                </el-menu>
-              </div>
-              <div class="layout-header-bottom-right">
-                <div class="layout-header-bottom-right-qr">
-                  <div class="layout-header-bottom-right-qr-img">
-                    <img :src="qrImg" alt="" />
-                    <p>下载数农App</p>
-                  </div>
-                  <div class="layout-header-bottom-right-qr-img">
-                    <img :src="qrImg" alt="" />
-                    <p>打开数农小程序</p>
-                  </div>
-                </div>
-                <p>使用数农手机服务，更方便</p>
-              </div>
             </div>
           </div>
-          <component :is="useWrapComponents(Component, route)" :key="route.path" />
+          <p>使用数农手机服务，更方便</p>
         </div>
-      </keep-alive>
+      </div>
-    </transition>
+    </div>
-  </router-view>
+    <!-- 子应用不能使用router-view的插槽功能 -->
+    <router-view v-if="isSubApp" />
+    <router-view v-else v-slot="{ Component, route }">
+      <transition name="fade-slide" mode="out-in" appear>
+        <keep-alive v-if="isReload" :include="cacheRoutes">
+          <component :is="useWrapComponents(Component, route)" :key="route.path" />
+        </keep-alive>
+      </transition>
+    </router-view>
+  </div>
 </template>
 
 <script setup name="layout">
@@ -66,12 +68,16 @@ import { usePermissionStore } from '@/store/modules/permission';
 import { useWrapComponents } from '@/hooks/useWrapComponents';
 import { qrImg } from './base64img';
 import AppLink from './Link.vue';
+import { useRoute } from 'vue-router';
 
+const route = useRoute();
 const SettingStore = useSettingStore();
 const PermissionStore = usePermissionStore();
 const cacheRoutes = computed(() => PermissionStore.keepAliveRoutes);
 const isReload = computed(() => SettingStore.isReload);
 
+const isSubApp = computed(() => route.path.includes('sub'));
+
 const keyword = ref('');
 
 const meuns = ref([

main/src/micro/index.js

@@ -30,7 +30,7 @@ const registerGlobalMicroApps = () => {
   });
 
   start({
-    prefetch: false, // 取消预加载
+    prefetch: 'all', // 取消预加载
     sandbox: { experimentalStyleIsolation: true },
   });
 

main/src/router/index.js

@@ -32,7 +32,7 @@ export const constantRoutes = [
         meta: { title: '平台入口', icon: 'House' },
       },
       {
-        path: '/sub-admin/:pathMatch(.*)',
+        path: '/sub-admin/:pathMatch(.*)*',
         component: () => import('@/views/subApp.vue'),
         name: 'sub-admin',
         hidden: true,

main/src/views/subApp.vue

@@ -14,7 +14,7 @@ export default {
 };
 </script>
 <style>
-#app {
+#sub-app {
   width: 100%;
 }
 </style>