共计 1133 个字符,预计需要花费 3 分钟才能阅读完成。
qiankun 官网文档:https://qiankun.umijs.org/zh/guide/getting-started
版本:
"qiankun": "^2.4.0",
"vue": "^2.5.2"
vue 入口文件 main.js
失常的 vue 入口文件写法
new Vue({
el: '#app',
router,
store,
components: {App},
apolloProvider,
template: '<App/>'
})
退出微前端之后的写法:
let instance = null;
function render(props = {}) {const { container} = props;
instance = new Vue({
router,
store,
apolloProvider,
render: h => h(App),
}).$mount(container ? container.querySelector('#app') : '#app');
}
// webpack 打包公共文件门路
if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;} else {
// 独立运行时
render();}
//
export async function bootstrap() {console.log('[vue] vue app bootstraped');
}
export async function mount(props) {console.log('[vue] props from main framework', props);
render(props);//props 为微前端渲染的节点
}
export async function unmount() {// instance.$destroy();
// instance.$el.innerHTML = '';
// instance = null;
// router = null;
}
主利用注册微前端入口
import {registerMicroApps, start} from 'qiankun';
registerMicroApps([{
name: 'subapp',
container: '#subAppContainer',
entry: 'http://10.168.0.0:8080/console',//
activeRule: '/govern',
}, ], { // 父级组件传递数据到子组件
beforeLoad: app => {
//
window.qiankunroutebase = '/microApp';
}
});
//start()// 在 activeRule 的页面上触发 start 即可
正文完