微前端（乾坤）使用记录

当在Vue中使用乾坤微前端框架时，需要进行主应用和子应用的配置和传参。下面是一个完整的示例：

1. 主应用配置：
在主应用的入口文件（如main.js）中，需要进行乾坤的初始化和配置。

import { createApp } from 'vue';
import { registerMicroApps, start } from 'qiankun';
import App from './App.vue';

// 创建主应用实例
const app = createApp(App);

// 注册子应用
registerMicroApps([
  {
    name: 'sub-app-1',
    entry: '//localhost:8081', // 子应用1的入口地址
    container: '#sub-app-container', // 子应用1的容器
    activeRule: '/sub-app-1', // 子应用1的激活规则
    props: {
      // 可以在这里定义需要传递的参数
      message: 'Hello from main app!',
    },
  },
]);

// 启动乾坤
start();

// 挂载主应用
app.mount('#app');
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

2. 子应用配置：
在子应用的入口文件中，需要进行乾坤的初始化和配置，并可以接收主应用传递的参数。

import { createApp } from 'vue';
import App from './App.vue';

// 创建子应用实例
const app = createApp(App);

// 接收主应用传递的参数
app.config.globalProperties.$props = __POWERED_BY_QIANKUN__ ? window.__POWERED_BY_QIANKUN__.props : {};

// 挂载子应用
app.mount('#app');
1
2
3
4
5
6
7
8
9
10
11

3. 子应用组件中使用传递的参数：
在子应用的组件中，可以通过this.$props访问主应用传递的参数。

<template>
  <div>
    <h1>Sub Apph1>
    <p>{{ $props.message }}p>
  div>
template>

<script>
export default {
  mounted() {
    console.log(this.$props);
  },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

这样，主应用就可以将参数传递给子应用，并在子应用中使用。同时，乾坤会根据激活规则自动加载和卸载子应用，实现微前端的效果。