From aa3e8ddc722750cf131d61253579f3fa81a64c32 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期三, 24 四月 2024 16:22:54 +0800
Subject: [PATCH] 加载子应用
---
src/assets/main.css | 2
index.html | 2
src/child.ts | 69 ++++++++++++++++++----------------
src/router/index.ts | 6 +-
src/views/home.vue | 26 +++++++++---
src/main.ts | 2
6 files changed, 61 insertions(+), 46 deletions(-)
diff --git a/index.html b/index.html
index c538241..a9a6a0f 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
<title>鏁板瓧鏁欐潗闃呰鍣�</title>
</head>
<body>
- <div id="app"></div>
+ <div id="parentApp"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
diff --git a/src/assets/main.css b/src/assets/main.css
index f0291dd..fcfa5fb 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,6 +1,6 @@
@import './base.css';
-#app {
+#parentApp {
width: 100%;
height: 100%;
}
diff --git a/src/child.ts b/src/child.ts
index b605519..829a065 100644
--- a/src/child.ts
+++ b/src/child.ts
@@ -1,47 +1,50 @@
-import { registerMicroApps,setDefaultMountApp} from "qiankun";
+import { registerMicroApps, setDefaultMountApp, start } from 'qiankun'
const microApps = [
{
// - 蹇呴�夛紝寰簲鐢ㄧ殑鍚嶇О锛屽井搴旂敤涔嬮棿蹇呴』纭繚鍞竴
- name: "vue-app",
+ name: 'app-content',
// - 蹇呴�夛紝寰簲鐢ㄧ殑鍏ュ彛
- entry: 'http://192.168.3.196:8080/',
+ entry: '//182.92.203.7:3007/books/test/',
+ // entry: '//192.168.3.196:8080/',
// - 蹇呴�夛紝寰簲鐢ㄧ殑瀹瑰櫒鑺傜偣鐨勯�夋嫨鍣ㄦ垨鑰� Element 瀹炰緥
- container: "#container",
+ container: '#container',
// - 蹇呴�夛紝寰簲鐢ㄧ殑婵�娲昏鍒�
//鏀寔鐩存帴閰嶇疆瀛楃涓叉垨瀛楃涓叉暟缁勶紝濡� activeRule: '/app1' 鎴� activeRule: ['/app1', '/app2']锛屽綋閰嶇疆涓哄瓧绗︿覆鏃朵細鐩存帴璺� url 涓殑璺緞閮ㄥ垎鍋氬墠缂�鍖归厤锛屽尮閰嶆垚鍔熻〃鏄庡綋鍓嶅簲鐢ㄤ細琚縺娲汇��
//鏀寔閰嶇疆涓�涓� active function 鍑芥暟鎴栦竴缁� active function銆傚嚱鏁颁細浼犲叆褰撳墠 location 浣滀负鍙傛暟锛屽嚱鏁拌繑鍥� true 鏃惰〃鏄庡綋鍓嶅井搴旂敤浼氳婵�娲汇�傚 location => location.pathname.startsWith('/app1')銆�
- activeRule: "#/app-content", //鍖归厤鎵�鏈変互/subPath寮�澶寸殑涓哄瓙搴旂敤
+ activeRule: '/home' //鍖归厤鎵�鏈変互/subPath寮�澶寸殑涓哄瓙搴旂敤
//loader - (loading: boolean) => void - 鍙�夛紝loading 鐘舵�佸彂鐢熷彉鍖栨椂浼氳皟鐢ㄧ殑鏂规硶銆�
//鍙�夛紝涓诲簲鐢ㄩ渶瑕佷紶閫掔粰寰簲鐢ㄧ殑鏁版嵁銆�
- props: {
- _parent_base: '/app-content/',
- msg:'杩欐槸涓诲簲鐢ㄤ紶缁欏瓙搴旂敤鐨勬秷鎭�'
- },
- },
-];
-// 涔惧潳鎻愪緵鐨勫瓙搴旂敤鐢熷懡鍛ㄦ湡閽╁瓙 鍙敤浜庡姞杞絣oading
-const mount={
- beforeLoad: () => {
- //寮�濮嬪姞杞絣oading
- console.log('瀛愬簲鐢ㄥ姞杞藉墠')
- },
- beforeMount: () => {
- console.log('瀛愬簲鐢ㄦ寕杞藉墠')
- },
- afterMount: () => {
- //缁撴潫鍔犺浇loading
- console.log('瀛愬簲鐢ㄦ寕杞藉悗')
- },
- beforeUnmount: () => {
- console.log('瀛愬簲鐢ㄥ嵏杞藉墠')
- },
- afterUnmount: () => {
- console.log('瀛愬簲鐢ㄥ嵏杞藉悗')
- },
+ // props: {
+ // _parent_base: '/app-content/',
+ // msg:'杩欐槸涓诲簲鐢ㄤ紶缁欏瓙搴旂敤鐨勬秷鎭�'
+ // },
}
+]
+// 涔惧潳鎻愪緵鐨勫瓙搴旂敤鐢熷懡鍛ㄦ湡閽╁瓙 鍙敤浜庡姞杞絣oading
+const mount = {
+ beforeLoad: () => {
+ //寮�濮嬪姞杞絣oading
+ console.log('瀛愬簲鐢ㄥ姞杞藉墠')
+ },
+ beforeMount: () => {
+ console.log('瀛愬簲鐢ㄦ寕杞藉墠')
+ },
+ afterMount: () => {
+ //缁撴潫鍔犺浇loading
+ console.log('瀛愬簲鐢ㄦ寕杞藉悗')
+ },
+ beforeUnmount: () => {
+ console.log('瀛愬簲鐢ㄥ嵏杞藉墠')
+ },
+ afterUnmount: () => {
+ console.log('瀛愬簲鐢ㄥ嵏杞藉悗')
+ }
+}
//娉ㄥ唽瀛愬簲鐢�
-registerMicroApps(microApps,mount);
+registerMicroApps(microApps, mount)
//璁剧疆榛樿鍚姩瀛愬簲鐢�
-setDefaultMountApp('/subPath');
+setDefaultMountApp('/home')
//鍚姩qiankun | 涓嶅彲閲嶅鍚姩 | 濡傛灉瀛愬簲鐢ㄥ叆鍙ｅ湪app.vue閲屽彲浠ュ湪杩欏惎鍔ㄥ惁鍒欎細鎶ラ敊鎵句笉鍒板瓙搴旂敤缁撶偣
-//start()
+start({
+ prefetch: false,
+})
diff --git a/src/main.ts b/src/main.ts
index 95c79c2..1c4f4c5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -48,4 +48,4 @@
app.component(key, component)
}
-app.mount('#app')
+app.mount('#parentApp')
diff --git a/src/router/index.ts b/src/router/index.ts
index af82e54..7088b74 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,10 +1,10 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import Layout from '@/layout/layout.vue'
const Home = () => import('@/views/home.vue')
const Login = () => import('@/views/login.vue')
const router = createRouter({
- history: createWebHashHistory(import.meta.env.BASE_URL),
+ history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
@@ -23,7 +23,7 @@
path: '/home',
name: 'home',
meta: { auth: true },
- component: Home
+ component: Home,
}
]
}
diff --git a/src/views/home.vue b/src/views/home.vue
index ec58c69..42cb25a 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -99,7 +99,7 @@
<div><img :src="zoomOut" @click="changePageSize('reduce')" /></div>
</div>
<div class="brushImgBox">
- <div><img :src="huabi2" class="brushImg" />鐢荤瑪</div>
+ <div @click="loadChild"><img :src="huabi2" class="brushImg" />鐢荤瑪</div>
<!-- <el-switch v-model="headerData.brushToolShow" @change="brushToolShow"/> -->
</div>
</div>
@@ -422,6 +422,13 @@
<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+//鑾峰彇璺敱鍣�
+let $router = useRouter()
+//鑾峰彇褰撳墠璺敱鐨勪俊鎭�
+let $route = useRoute()
+
import { ElMessage } from 'element-plus'
import mulu from '@/assets/images/menu/mulu.png'
import biji from '@/assets/images/menu/biji.png'
@@ -492,12 +499,8 @@
import zoomIn from '../assets/images/operation/zoomIn.png'
import zoomOut from '../assets/images/operation/zoomOut.png'
import huabi2 from '../assets/images/operation/huabi.svg'
-import { start } from 'qiankun'
-onMounted(() => {
-
- start()
-
-})
+import { loadMicroApp } from 'qiankun'
+
// 鑿滃崟
const menuData = reactive([
{
@@ -1049,6 +1052,15 @@
ctx = canvas.value.getContext('2d') as CanvasRenderingContext2D
}
}
+
+const loadChild = () => {
+ // loadMicroApp({
+ // name: 'book',
+ // entry: '//192.168.3.196:8080/',
+ // container: document.querySelector('#container')
+ // })
+ // $router.push({path: "/aa"})
+}
</script>
<style lang="less">
--
Gitblit v1.9.1