通过路由跳转至子应用

main/src/App.vue

@@ -1,8 +1,6 @@
 <template>
-  <div id="app">
-    <!-- <el-button v-for="item in microApps" :key="item.activeRule" type="primary" @click="gotoPage(item)">{{ item.name }}</el-button> -->
-    <router-view />
-  </div>
+  <!-- <el-button v-for="item in microApps" :key="item.activeRule" type="primary" @click="gotoPage(item)">{{ item.name }}</el-button> -->
+  <router-view />
 </template>
 
 <script setup name="App">

main/src/layouts/index.vue

@@ -81,7 +81,7 @@ const meuns = ref([
   },
   {
     label: '农事服务',
-    path: '/sub-admin/',
+    path: '/sub-admin/home',
   },
   {
     label: '涉农金融',

main/src/main.js

@@ -5,11 +5,9 @@ import router from './router';
 import pinia from './store';
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
-import { registerGlobalMicroApps } from './micro';
 import { registerElIcons } from './plugins/icon';
 import './utils/permission';
 
 const app = createApp(App);
 app.use(pinia).use(router).use(ElementPlus).mount('#root');
 registerElIcons(app);
-registerGlobalMicroApps();

main/src/micro/app.js

@@ -69,7 +69,7 @@ export const microApps = [...leftApps, ...rightApps];
 const apps = microApps.map((item) => {
   return {
     ...item,
-    container: '#app',
+    container: '#sub-app',
     props: {
       routerBase: item.activeRule,
       getGlobalState: actions.getGlobalState,

main/src/router/index.js

@@ -12,6 +12,12 @@ export const constantRoutes = [
       icon: 'Login',
     },
   },
+  {
+    path: '/platform',
+    component: () => import('@/views/index.vue'),
+    name: 'platform',
+    meta: { title: '平台入口', icon: 'House' },
+  },
   {
     path: '/',
     name: 'layout',
@@ -20,11 +26,18 @@ export const constantRoutes = [
     meta: { title: '平台入口', icon: 'House' },
     children: [
       {
-        path: '/platform',
-        component: () => import('@/views/index.vue'),
-        name: 'platform',
+        path: '/home',
+        component: () => import('@/views/home.vue'),
+        name: 'home',
         meta: { title: '平台入口', icon: 'House' },
       },
+      {
+        path: '/sub-admin/:pathMatch(.*)',
+        component: () => import('@/views/subApp.vue'),
+        name: 'sub-admin',
+        hidden: true,
+        meta: { title: '子应用入口', icon: 'House' },
+      },
     ],
   },
 ];

main/src/views/home.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>home</div>
+</template>
+
+<script setup></script>
+
+<style></style>

main/src/views/subApp.vue

@@ -0,0 +1,20 @@
+<template>
+  <div id="sub-app"></div>
+</template>
+
+<script>
+import { registerGlobalMicroApps } from '@/micro';
+export default {
+  mounted() {
+    if (!window.qiankunStarted) {
+      window.qiankunStarted = true;
+      registerGlobalMicroApps();
+    }
+  },
+};
+</script>
+<style>
+#app {
+  width: 100%;
+}
+</style>