| | |
| | | import { registerMicroApps,setDefaultMountApp} from "qiankun"; |
| | | const microApps = [ |
| | | { |
| | | import { registerMicroApps, setDefaultMountApp, start } from 'qiankun' |
| | | import { initGlobalState } from 'qiankun' |
| | | import state from './qiankunState/state' |
| | | |
| | | const actions = initGlobalState(state) |
| | | |
| | | actions.onGlobalStateChange((state, prev) => { |
| | | console.log("父层变化:",state, prev) |
| | | }) |
| | | |
| | | export const microApps = { |
| | | book1: { |
| | | // - 必选,微应用的名称,微应用之间必须确保唯一 |
| | | name: "vue-app", |
| | | name: 'app-content', |
| | | // - 必选,微应用的入口 |
| | | entry: 'http://192.168.3.196:8080/', |
| | | entry: '//182.92.203.7:3007/books/book/1/', |
| | | // entry: '//192.168.3.203: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:'这是主应用传给子应用的消息' |
| | | }, |
| | | }, |
| | | ]; |
| | | // 乾坤提供的子应用生命周期钩子 可用于加载loading |
| | | const mount={ |
| | | beforeLoad: () => { |
| | | //开始加载loading |
| | | console.log('子应用加载前') |
| | | }, |
| | | beforeMount: () => { |
| | | console.log('子应用挂载前') |
| | | }, |
| | | afterMount: () => { |
| | | //结束加载loading |
| | | console.log('子应用挂载后') |
| | | }, |
| | | beforeUnmount: () => { |
| | | console.log('子应用卸载前') |
| | | }, |
| | | afterUnmount: () => { |
| | | console.log('子应用卸载后') |
| | | }, |
| | | } |
| | | } |
| | | |
| | | window.qiankunActions = actions |
| | | |
| | | export default actions |
| | | |
| | | // actions.offGlobalStateChange() |
| | | |
| | | // 乾坤提供的子应用生命周期钩子 可用于加载loading |
| | | // const mount = { |
| | | // beforeLoad: () => { |
| | | // //开始加载loading |
| | | // 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() |