qiankun的简单使用和通信

qiankun是一个微前端js框架

简单使用

主应用

1. 安装 qiankun

注意我们只需要在主应用中安装qiankun,子应用中是不用的。

$ yarn add qiankun # 或者 npm i qiankun -S

2. 在主应用中注册微应用

vue项目在main.js中注册。

import {
    registerMicroApps, start } from 'qiankun';

/**
 * 路由监听
 * @param {*} routerPrefix 前缀
 */
// function genActiveRule(routerPrefix) {
   
//   console.log(location.pathname)
//   return location => location.pathname.indexOf(routerPrefix);
// }   //activeRule的配置函数，当然我们也可以直接配置字符串和其他规则，具体参考文档


registerMicroApps([
  {
   
    name: 'new-project',  // 子应用名称
    entry: '//localhost:8082', //子应用入口，就是单独访问子应用时的url,这里我把子应用配置在8082端口
    container: '#container',	// 子应用挂载的dom容器,我们把它写在主应用的app.vue中
    // activeRule: genActiveRule("/app1"), //子应用触发路径，这里使用前面配置的函数
    activeRule:"/app1" //当我们主应用的url含有app1时会触发子应用加载，为了方便触发，建议主应用路由使用history模式，在hash模式下，自动添加的#号会影响子应用触发（不知道为什么）
  },
]);
//启动
start();

增加挂载子应用的盒子

app.vue

<template>
    <div id="app">
         <p>我是父应用</p>
         <!-- 子应用容器 -->
        <div id="container"></div>
    </div>
</template>

微应用

微应用不需要额外安装任何其他依赖即可接入 qiankun 主应用。

1. 配置main.js

微应用需要在自己的入口 js 导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。

main.js

import './public-path' // 注意需要引入public-path
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import routes from './router';

let router = null;
let instance = null;

function render(props = {
   }) {
   
  const {
    container } = props;
  router = new VueRouter({
   
    base: '/app1', //这里要和在主应用配置的activeRule一样
    mode: 'history',
    routes,
  });

  instance = new Vue({
   
    router,
    render: h => h(App),
  }).$mount(container ? container.querySelector(