vue的哈希模式下乾坤微应用的使用

开始

看官网文档，简单，直接开始

主应用部分
封装使用乾坤的方法

import { registerMicroApps } from 'qiankun'

export const useQianKun = () => {
const apps = [
{
name: 'vue',
entry: 'http://localhost:8022',
container: '#vue',
activeRule: '/#/vue',
props: {
msg: 'com form main to vue'
}
}, {
name: 'react',
entry: 'http://localhost:3000',
container: '#react',
activeRule: '/react',
props: {
msg: 'com form main to react'
}
}, {
name: 'vanilla',
entry: 'http://127.0.0.1:5500/%E5%8F%AF%E8%A7%86%E5%8C%96/11/',
container: '#vanilla',
activeRule: '/vanilla',
props: {
msg: 'com form main to vanilla'
}
},
]

registerMicroApps(apps, {
beforeLoad: [app => {
console.log(${app.name} before load);
}],
beforeMount: [app => {
console.log(${app.name} beforeMount);
}],
afterMount: [app => {
console.log(${app.name} afterMount);
}],
beforeUnmount: [app => {
console.log(${app.name} beforeUnmount);
}],
afterUnmount: [app => {
console.log(${app.name} afterUnmount);
}],
})
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
在main.js里面使用

然后在要用的地方start()

import { start } from 'qiankun';
这里需要注意，start匹配到规则需要dom存在，所以如果是直接加载微应用的话需要确保主应用留给微应用的dom已经加载好。
路由模块也需要加上对应的配置

微应用的路由跳转时也会触发主应用的路由跳转
比如微应用跳转到/#/vue/conclusion
主应用也会跳转到/#/vue/conclusion
这时候需要在主应用添加路径参数，指向微应用dom所在页面即可

微应用部分
main.js

let router = null
let instance = null

/**

• @description:
• @param {HTMLElement} container 字应用容器
• @param {*} parentStore

• @return { } /
  function render({ container, parentStore } = {}) {

  router = new VueRouter({
  routes
  })
  if (window.POWERED_BY_QIANKUN) {
  router.beforeEach((to, from, next) => {
  console.log(to, from , 'in vue micro app');
  if (!to.path.includes('vue')) {

   return next({
     path: '/vue/' + to.path
   })
  

  }
  next()
  })
  }

  console.log('container', container, routes);

  instance = new Vue({
  router,
  store,
  data() {
  return {

   parentStore
  

  }
  },
  render: h => h(App)
  }).$mount(container ? container.querySelector('#app-vue') : '#app-vue')
  }

if (!window.POWERED_BY_QIANKUN) {
render()
}

export async function bootstrap() {
console.log(vue的bootstrap);
}

export async function mount(props) {
if (props.parentStore) {
await props.parentStore.dispatch('getResource', { name: 'vue的资源' })
}
console.log(子应用的mount周期, props);
render(props)
}

export async function unmount() {
console.log(子应用的unmount周期);
instance.$destroy()
instance.$el.innerHTML = ''
instance = null
router = null
}

export async function update(props) {
console.log('update life in vue', props);
}