前言
这里接 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
