前言
这里接 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' })
参考链接
GitHub 代码实例
运行时，先运行主应用，再运行子应用，主应用默认 8080 端口，子应用默认 8081，主应用中注册的子应用地址为 http://localhost:8081
