fix: 变更api

This commit is contained in:
wanchun 2022-06-07 17:20:41 +08:00
parent 329b41737d
commit 963c834bd1
5 changed files with 30 additions and 9 deletions

View File

@ -269,3 +269,24 @@ export default {
- 主应用使用 props 的模式传递数据(参考主应用装载子应用配置一节) - 主应用使用 props 的模式传递数据(参考主应用装载子应用配置一节)
- 子应用在生命周期钩子中获取 props 消费数据(参考子应用运行时配置一节) - 子应用在生命周期钩子中获取 props 消费数据(参考子应用运行时配置一节)
### MicroApp
| 属性 | 说明 | 类型 | 默认值 |
| ---- | ----------- | ------------- | ---------- |
| name | 子应用名称,传入`qiankun.main.apps`配置中的`name` | String | - |
| settings | 子应用配置信息 | Object | {} |
| props | 传入子应用的参数 | Object | {} |
| lifeCycles | 子应用生命周期钩子 | Object | {} |
| cacheName | 子应用缓存名称,配置后根据`name`+`cacheName`缓存子应用实例 | Object | - |
### MicroAppWithMemoHistory
| 属性 | 说明 | 类型 | 默认值 |
| ---- | ----------- | ------------- | ---------- |
| name | 子应用名称,传入`qiankun.main.apps`配置中的`name` | String | - |
| settings | 子应用配置信息 | Object | {} |
| props | 传入子应用的参数 | Object | {} |
| lifeCycles | 子应用生命周期钩子 | Object | {} |
| cacheName | 子应用缓存名称,配置后根据`name`+`cacheName`缓存子应用实例 | Object | - |
| url | 子应用的路由地址 | String | - |

View File

@ -2,11 +2,11 @@ import { defaultHistoryType } from '../constants';
function getMicroApp(options) { function getMicroApp(options) {
const { const {
key, microAppName, entry, masterHistoryType, base, namespace, ...normalizedRouteProps key, microAppName, cacheName, masterHistoryType, base, namespace, ...normalizedRouteProps
} = options; } = options;
return `(() => { return `(() => {
const { getMicroAppRouteComponent } = require('@@/${namespace}/getMicroAppRouteComponent'); const { getMicroAppRouteComponent } = require('@@/${namespace}/getMicroAppRouteComponent');
return getMicroAppRouteComponent({key: '${key}', appName: '${microAppName}', entry: '${entry}', base: '${base}', masterHistoryType: '${masterHistoryType}', routeProps: ${JSON.stringify(normalizedRouteProps)} }) return getMicroAppRouteComponent({key: '${key}', appName: '${microAppName}', cacheName: '${cacheName}', base: '${base}', masterHistoryType: '${masterHistoryType}', routeProps: ${JSON.stringify(normalizedRouteProps)} })
})()`; })()`;
} }
@ -19,7 +19,7 @@ function modifyRoutesWithAttachMode({
if (route.meta && route.meta.microApp) { if (route.meta && route.meta.microApp) {
route.component = getMicroApp({ route.component = getMicroApp({
key: route.path, key: route.path,
entry: route.meta.entry ?? route.path, cacheName: route.meta.cacheName ?? route.path,
microAppName: route.meta.microApp, microAppName: route.meta.microApp,
masterHistoryType, masterHistoryType,
base, base,

View File

@ -28,7 +28,7 @@ export const MicroApp = defineComponent({
type: String, type: String,
required: true required: true
}, },
entry: String, cacheName: String,
settings: Object, settings: Object,
props: Object, props: Object,
lifeCycles: Object lifeCycles: Object
@ -76,12 +76,12 @@ export const MicroApp = defineComponent({
// 只有当name变化时才重新加载新的子应用 // 只有当name变化时才重新加载新的子应用
const loadApp = () => { const loadApp = () => {
const appConfig = appConfigRef.value; const appConfig = appConfigRef.value;
const { name, entry } = appConfig; const { name, cacheName } = appConfig;
// 加载新的 // 加载新的
const app = loadMicroApp( const app = loadMicroApp(
{ {
// 保证唯一 // 保证唯一
name: `${name}_${props.entry || ''}`, name: `${name}_${props.cacheName || ''}`,
entry: entry, entry: entry,
container: containerRef.value, container: containerRef.value,
props: {...propsConfigRef.value, ...attrs} props: {...propsConfigRef.value, ...attrs}

View File

@ -14,7 +14,7 @@ export const MicroAppWithMemoHistory = defineComponent({
type: String, type: String,
required: true required: true
}, },
entry: String, cacheName: String,
settings: Object, settings: Object,
props: Object, props: Object,
lifeCycles: Object, lifeCycles: Object,

View File

@ -3,11 +3,11 @@ import { MicroApp } from './MicroApp';
export function getMicroAppRouteComponent({ export function getMicroAppRouteComponent({
key, key,
appName, appName,
entry, cacheName,
base, base,
masterHistoryType, masterHistoryType,
routeProps routeProps
}) { }) {
return <MicroApp key={key} base={base} masterHistoryType={masterHistoryType} name={appName} entry={entry} {...routeProps} />; return <MicroApp key={key} base={base} masterHistoryType={masterHistoryType} name={appName} cacheName={cacheName} {...routeProps} />;
} }