feat: 注册子应用

main/micro/const/subApps.js

@@ -0,0 +1,6 @@
+let list = []
+
+export const getList = () => list
+
+export const setList = (appList) => list = appList
+

main/micro/index.js

@@ -0,0 +1,2 @@
+// 引入文件
+export {default as MicroStart } from './start'

main/micro/start.js

@@ -0,0 +1,12 @@
+import { setList } from './const/subApps'
+// start 文件
+const registerMicroApps = (appList)=>{
+    // 注册到window上
+    // window.appList = appList
+    setList(appList)
+}
+
+
+export default {
+    registerMicroApps
+}

main/package.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "vue-router": "^4.1.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -36,7 +37,7 @@
       "requireConfigFile": false
     },
     "rules": {
-      "no-unused-vars":0
+      "no-unused-vars": 0
     }
   },
   "browserslist": [

main/src/App.vue

@@ -3,7 +3,9 @@
   <MainNav />
   <div class="sub-container">
     <Loading v-show="loading" />
-    <div v-show="!loading" id="sub-body">子应用内容</div>
+    <!-- <div v-show="!loading" id="sub-container">子应用内容</div> -->
+    <!-- 修改如下 -->
+    <div v-show="!loading" id="micro-container">子应用内容</div>
   </div>
   <Footer />
 </template>
@@ -59,7 +61,7 @@ height: 100%;
   position: relative;
 }
 
-#micro-container {
+#micro-container{
   min-height: 100%;
   width: 100%;
 }

main/src/components/MainNav.vue

@@ -35,63 +35,37 @@
 
 <script>
 import { ref, watch } from 'vue'
+import { NAV_LIST } from '../const/nav'
+import {useRouter, useRoute} from 'vue-router'
 export default {
   name: 'MainNav',
   setup() {
-    const NAV_LIST = [
-      {
-        name: '首页',
-        status: true,
-        value: 0,
-        url: '/vue3/#/index',
-        hash: '',
-      },
-      {
-        name: '资讯',
-        status: false,
-        value: 1,
-        url: '/react15#/information',
-      },
-      {
-        name: '视频',
-        status: false,
-        value: 2,
-        url: '/react15#/video',
-        hash: '',
-      },
-      {
-        name: '选车',
-        status: false,
-        value: 3,
-        url: '/vue3/#/select',
-        hash: '',
-      },
-      {
-        name: '新能源',
-        status: false,
-        value: 4,
-        url: '/vue2#/energy',
-        hash: '',
-      },
-      {
-        name: '新车',
-        status: false,
-        value: 5,
-        url: '/react17#/new-car',
-        hash: '',
-      },
-      {
-        name: '排行',
-        status: false,
-        value: 6,
-        url: '/react17#/rank',
-        hash: '',
-      },
-    ]
+    const router = useRouter()
+    const route = useRoute() // 获取当前路由对象
+
+    // 刷新时候，在当前路由
+    watch(route,(val)=>{
+      // console.log(val);
+      
+      // console.log(val.fullPath) // 当前路由
+      for (let i = 0; i < NAV_LIST.length; i++) {
+        if (val.fullPath.indexOf(NAV_LIST[i].url)!==-1) { // 如果当前路由与路由匹配上
+           currentIndex.value = i  // 设置active
+        }
+      }
+
+    }, {deep: true})    // 深度监听
 
     const currentIndex = ref(0) // 创建响应式变量
+
     const setCurrentIndex = (data, index) => {
+      // 优化：如果当前路由就是当前的路由,就不要触发set
+      if (data.url === route.fullPath) {
+        return ;
+      }
+
       currentIndex.value = index
+      router.push(data.url)
     }
 
     const searchStatus = ref(true)

main/src/const/nav.js

@@ -0,0 +1,50 @@
+export const NAV_LIST = [
+    {
+      name: '首页',
+      status: true,
+      value: 0,
+      url: '/vue3/index',
+      hash: '',
+    },
+    {
+      name: '资讯',
+      status: false,
+      value: 1,
+      url: '/react15/information',
+    },
+    {
+      name: '视频',
+      status: false,
+      value: 2,
+      url: '/react15/video',
+      hash: '',
+    },
+    {
+      name: '选车',
+      status: false,
+      value: 3,
+      url: '/vue3/select',
+      hash: '',
+    },
+    {
+      name: '新能源',
+      status: false,
+      value: 4,
+      url: '/vue2/energy',
+      hash: '',
+    },
+    {
+      name: '新车',
+      status: false,
+      value: 5,
+      url: '/react17/new-car',
+      hash: '',
+    },
+    {
+      name: '排行',
+      status: false,
+      value: 6,
+      url: '/react17/rank',
+      hash: '',
+    },
+  ]

main/src/main.js

@@ -1,4 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
+import { subNavList } from './store/sub'
+// 主应用引入 util 方法
+import { registerApp } from './store/utils'
 
-createApp(App).mount('#micro_web_main_app')
+registerApp(subNavList)
+
+createApp(App).use(router).mount('#micro_web_main_app')

main/src/router/index.js

@@ -0,0 +1,32 @@
+import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router';
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('../App.vue'),
+  },
+  {
+    path: '/react15',
+    component: () => import('../App.vue'),
+  },
+  {
+    path: '/react16',
+    component: () => import('../App.vue'),
+  },
+  {
+    path: '/vue2',
+    component: () => import('../App.vue'),
+  },
+  {
+    path: '/vue3',
+    component: () => import('../App.vue'),
+  },
+];
+
+const router =  (basename='')=>createRouter({
+//   history: createWebHashHistory(),
+  history: createWebHistory(basename),
+  routes,
+});
+
+export default router();

main/src/store/sub.js

@@ -0,0 +1,51 @@
+
+// vue2
+// - http://:localhost:9080/#/
+//     - energy
+
+// vue3
+// - http://:localhost:9081/#/
+//     - index
+//     - select
+// react15
+// - http://:localhost:9082/#/
+//    -/information
+//    -/information-last
+//    -/video
+//    -/video-last
+// react17
+// - http://:localhost:9083/#/
+//     -/login
+//     -/new-car
+//     -/rank
+
+// ```
+
+// 子应用列表
+export const subNavList = [
+    {
+        name:'react15', //子应用名称
+        activeRule:'/react15', // 激活规则
+        container:'#micro-container' ,// 显示的容器，唯一标识
+        entry:'//localhost:9082/' // 启动的入口
+    },
+    {
+        name:'react17', 
+        activeRule:'/react17', 
+        container:'#micro-container',
+        entry:'//localhost:9083/' // 启动的入口
+
+    },
+    {
+        name:'vue2', 
+        activeRule:'/vue2', 
+        container:'#micro-container',
+        entry:'//localhost:9080/'
+    },
+    {
+        name:'vue3', 
+        activeRule:'/vue3', 
+        container:'#micro-container',
+        entry:'//localhost:9081/'
+    }
+]

main/src/store/utils.js

@@ -0,0 +1,8 @@
+import { MicroStart } from '../../micro'
+
+const { registerMicroApps }= MicroStart
+// 注册子应用
+export const registerApp=(list)=>{
+    // 注册到微前端框架
+    registerMicroApps(list)
+}