先说主项目写法：
以vue2.0为例
注：如果还不明白 可以直接联系我V：q1546158390，写上备注(CSDN来)，也可解答其他前端问题。
直接上代码
qiankunIndex.js 父应用
引入乾坤
javascript
import { registerMicroApps } from 'qiankun'
import { microStore } from './store'
import { getEntryPath } from './tools'
import actions from '@/microApp/qiankun-action.js'
const microApp = {
install(Vue, optins = {}) {
const getActiveRule = hash => location =>
Array.isArray(hash)
? hash.some(path => {
return path instanceof RegExp
? path.test(location.hash)
: location.hash.includes(path)
})
: hash instanceof RegExp
? hash.test(location.hash)
: location.hash.includes(hash)
registerMicroApps(
[
{
name: 'app-name', // app name registered 子项目名称
// entry: getEntryPath('operations-center'), 子项目连接上唯一标识（发生产或者预上上线环境，可以打开）
entry: 'http://localhost:8000', // 子项目地址(本地调试时，可以打开)
container: '#quankunLayout',
activeRule: getActiveRule([
'#/xx/xxx/xxxxx',
]),
props: { microState: microStore.state, actions},
}
],
{
beforeLoad: app => console.log('before load', app.name),
beforeMount: [app => console.log('before mount', app.name)],
afterMount: [app => console.log('afterMount', app.name)],
beforeUnmount: [app => console.log('beforeUnmount', app.name)],
afterUnmount: [app => console.log('afterUnmount ', app.name)],
},
)
},
}
export default microApp./tools.js 父应用
java
export const getEntryPath = route => {
const { hostname } = window.location
// 本地开发可放开注释
if (hostname === 'localhost') {
// return `//localhost:8001/${route}/`
return `http://xx-xx.xx.cn/${route}/`
}
return `https://${hostname}/${route}/`
}@/microApp/qiankun-action.js 父应用
import { initGlobalState } from "qiankun";
const initState = {
vue: {
qiankun: '',
},
getTaskCounts: '',// 子应用变量 --必须
aims2Approle: [] // 子应用变量 --必须
}
const actions = initGlobalState(initState)
actions.onGlobalStateChange((state, preState) => {})
export default actionsqiankun.vue 父应用
xml
<template>
<div>
<QuankunLayout />
<div id="quankunLayout"></div>
</div>
</template>
<script>
// const QuankunLayoutHeader = r => require.ensure([], () => r(require('@/view/layout/QuankunLayoutHeader.vue')), 'QuankunLayoutHeader')
// import('@s/components/home/ApprovalListPanel/ApprovalListPanel'),
import QuankunLayout from '@/view/layout/QuankunLayout.vue'
import { start } from 'qiankun'
export default {
components: {
QuankunLayout
},
mounted() {
const { CACHE_MICRO_APP, runningMicroApps } = this.$store.state.microStore
const path = this.$route.path
const microAppName = CACHE_MICRO_APP.find(name => path.includes(name))
if (microAppName && runningMicroApps.includes(microAppName)) return
this.$store.commit('xx/SET_RUNNING_xxx', {
value: microAppName,
})
start()
},
}
</script>
<style></style>main.js 里面 引入 父应用
xml
import microApp from './microApp'
Vue.use(microApp)例如：子页面给父页面通知消息
父项目 你的组件里面 ，parentIndex.vue 父应用
typescript
import actions from "@/views/qkproject/qiankun-action"; // 引入乾坤
actions.onGlobalStateChange(async ({ aims2Approle, dialogParmes }) => {
if (aims2Approle) {
console.log(dialogParmes)
const loading = this.$loading({
lock: true,
background: 'rgba(0, 0, 0, 0.06)'
});
await this.initDetails(dialogParmes)
await this.isAdditionalUser(dialogParmes.taskId)
loading.close();
}
})父项目乾坤逻辑 基本编写完毕！！！
接下来就是子项目逻辑编写
引入乾坤 :
childeren.vue 子应用
typescript
import actions from "@/views/qkproject/qiankun-action";@/views/qkproject/qiankun-action 子应用，这里是触发父应用的方法
methods: {
// 子项目 触发父项目的方法
changeDetail() {
/**
* @des qiankun方法 调用父组件页面的相关方法，公共方法
* @source 用于识别子页面来源
* @Parmes 必须
* @id 必须
* @childerenId 非必须
* */
actions.setGlobalState({
source : '我是子页面', // 唯一标识
Parmes : {
id: 'xx',
childerenId: 'xxx'
}
})
},
}@/views/qkproject/qiankun-action.js
typescript
function emptyAction() {
console.warn('警告提示，当前使用的是空action');
}
// 设置一个用于通信的 action类
class Action {
actions = {
onGlobalStateChange: emptyAction,
setGlobalState: emptyAction
}
constructor() {
}
// 默认为空Action
// 设置actions
setActions(actions) {
this.actions = actions
}
// 映射
onGlobalStateChange(...args) {
return this.actions.onGlobalStateChange(...args)
}
// 映射
setGlobalState(...args) {
console.log(args, 'args', this, '----', this.actions.setGlobalState);
return this.actions.setGlobalState(...args)
}
}
const actions = new Action()
export default actions子项目 main.js
javascript
import Vue from 'vue';
import App from '@/app.vue';
import VueRouter from 'vue-router';
import { routes, beforeEachs, afterEachs } from '@/router';
import store from '@/store';
// 第三方插件
import plugins from '@/plugins';
import MyPlugin from './vendor';
/*** 加载公共样式*/
import '@/styles/index.scss';
import '@/styles/theme/index.css';
/*** 添加公共filters*/
import filter from '@/utils/filter';
// 引入icon
import icon from '@/icons';
import micro from '@/store/modules/microStore';
import formCreate from '@form-create/element-ui';
Vue.prototype.$EventBus = new Vue()
window.__Vue__ = Vue;
import actions from "@/views/qkproject/qiankun-action";
export let router = null;
let instance = null;
function render(props = {}) {
if (props) {
actions.setActions(props)
}
const { container } = props;
router = new VueRouter({
// base: window.__POWERED_BY_QIANKUN__ ? process.env.VUE_APP_QIANKUN_BASE : '/',
mode: 'hash',
routes,
});
Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.use(filter);
Vue.use(icon);
Vue.use(plugins);
Vue.use(MyPlugin);
Vue.use(formCreate);
Object.values(beforeEachs).forEach((guard) => {
router.beforeEach(guard);
});
Object.values(afterEachs).forEach((guard) => {
router.afterEach(guard);
});
instance = new Vue({
router,
store,
render: (h) => h(App),
}).$mount(container ? container.querySelector('#app') : '#app');
}
// 独立运行时 子项目
console.log(window.__POWERED_BY_QIANKUN__, 456123);
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
export async function bootstrap() {
console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
console.log('[vue] props from main framework', props);
micro.initMicro(props, store);
render(props);
}
export async function unmount() {
instance.$destroy();
instance.$el.innerHTML = '';
instance = null;
router = null;
}