前言

这里接 qiankun 实战（一） , 上一篇实现了主应用和子应用引入 qiankun, 接下来记录主应用和子应用之间运行嵌套，路由跳转，数据通信。

路由跳转

主应用跳转子应用 this.$router.push

routes 中配置对应子应用路由地址即可

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      // component: () => import('./views/Home.vue')
    },
    {
      path: '/home',
      name: 'home',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/hello',
      name: 'hello',
      component: () => import('./components/HelloWorld.vue')
    },
    {
      path: '/hellotwo', 
      name: 'HelloTwo',
      component: () => import('./components/Hello2.vue')
    },
    {
      path: '/vue-app', // Vue子应用路由配置，不用配置 component
      name: 'VueApp',
      children: [
        {
          path: '',
          name: 'HomePage',
        },
        {
          path: '/table1',
          name: 'TableOne',
        }
      ]
    }
  ]
})

this.$router.push({
  path: '/vue-app/table1'
})

子应用跳转主应用 window.history.pushState()

// state 数据 （可选）
// title 标题 （可选）
// url 路径， 必填
window.history.pushState(state, title, url);

// eg. 跳转主应用 hellotwo 页面
window.history.pushState({}, '', '/hellotwo');

跳转子应用时遇到的问题

主应用跳转子应用页面为空，如果控制台提示 app-errors.js?17fe:11 Uncaught Error: application 'vue-app' died in status SKIP_BECAUSE_BROKEN: [qiankun]: Target container with #vue-app not existed while vue-app mounting!, 这个是情况的出现是主应用注册子应用时 container 参数配置的元素不存在导致。

// 注册子应用
registerMicroApps([
  {
    name: 'vue-app',
    entry: 'http://localhost:8081',
    container: '#vue-app',
    activeRule: '/vue-app'
  }
])

// 需在 APP.vue 中添加 `vue-app` 元素
<div id="vue-app"></div>

主应用与子应用之间互相通信

主应用向子应用传值

主应用使用 qiankun 内置函数 initGlobalState，设置全局变量，通过 setGlobalState 向子应用传递 lang 参数的 CN 值

import { initGlobalState } from 'qiankun'


data () {
  return {
    globalState: null
  }
},

mounted () {
  console.log('Main App Home mounted')
  this.globalState = initGlobalState({
    lang: ''
  })
},


postMsgToVueAPP () {
  this.globalState.setGlobalState({
    lang: 'CN'
  })
}

子应用在 mount 函数中接受 props 参数,通过 onGlobalStateChange 函数监听主应用传递过来的值

export async function mount(props) {
  // 使用 Vue 原型属性
  Vue.prototype.parentStore = props
  props.onGlobalStateChange((state) => {
    console.log('子应用接受的主应用数据')
    console.log(state)
  }, true);
  render(props);
}

子应用向主应用传值

主应用设置 onGlobalStateChange 监听全局数据状态变化

import { initGlobalState } from 'qiankun'
  
data () {
  return {
    globalState: null
  }
},

mounted () {
  console.log('Main App Home mounted')
  this.globalState = initGlobalState({
    lang: ''
  })
  this.globalState.onGlobalStateChange(state => {
    // 监听全局状态，子应用更新主应用数据后触发
    console.log(state)
  })
},

子应用使用 setGlobalState 更新全局状态数据

// parentStore 为 `mount` 中设置到 Vue 原型属性中的值
this.parentStore.setGlobalState({
  lang: 'ZN'
})

参考链接

qiankun 官网

qiankun GitHub

GitHub 代码实例

运行时，先运行主应用，再运行子应用，主应用默认 8080 端口，子应用默认 8081，主应用中注册的子应用地址为 http://localhost:8081

主应用

子应用