blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-06 03:59:53 +08:00
Code Issues Projects Releases Wiki Activity
fes.js/reference/plugin/plugins/qiankun.html

191 lines
66 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="VuePress 2.0.0-beta.28">
<link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-qiankun | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案">
<link rel="preload" href="/fes.js/assets/js/runtime~app.e7cf0416.js" as="script"><link rel="preload" href="/fes.js/assets/css/styles.3651737f.css" as="style"><link rel="preload" href="/fes.js/assets/js/519.22262c34.js" as="script"><link rel="preload" href="/fes.js/assets/js/app.704a6fe6.js" as="script">
<link rel="stylesheet" href="/fes.js/assets/css/styles.3651737f.css">
</head>
<body>
<div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><!----><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="版本"><span class="title">版本</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="版本"><span class="title">版本</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/next" rel="noopener noreferrer" target="_blank" aria-label="next(3.0)"><!--[--><!--]--> next(3.0) <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="1.0"><!--[--><!--]--> 1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!----></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/fes.js/guide/" class="nav-link" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/config/" class="nav-link" aria-label="配置"><!--[--><!--]--> 配置 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/api/" class="nav-link" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/plugin/" class="nav-link router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/fes.js/reference/cli/" class="nav-link" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="版本"><span class="title">版本</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="版本"><span class="title">版本</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/next" rel="noopener noreferrer" target="_blank" aria-label="next(3.0)"><!--[--><!--]--> next(3.0) <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="1.0"><!--[--><!--]--> 1.0 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><li class="dropdown-item"><a class="nav-link external" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><div class="navbar-links-item"><a class="nav-link external" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/fes.js/reference/plugin/" class="nav-link router-link-active sidebar-heading sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--><!--[--><p class="sidebar-heading sidebar-item active">Plugins</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/plugins/access.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/enums.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/icon.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/jest.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/layout.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/locale.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/model.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/request.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-item active" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#启用方式" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#介绍" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#主应用配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="主应用配置"><!--[--><!--]--> 主应用配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#第一步-注册子应用" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="第一步：注册子应用"><!--[--><!--]--> 第一步：注册子应用 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#第二步-装载子应用" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="第二步：装载子应用"><!--[--><!--]--> 第二步：装载子应用 <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#子应用配置" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="子应用配置"><!--[--><!--]--> 子应用配置 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#第一步-插件注册" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="第一步：插件注册"><!--[--><!--]--> 第一步：插件注册 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#第二步-配置运行时生命周期钩子-可选" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="第二步：配置运行时生命周期钩子（可选）"><!--[--><!--]--> 第二步：配置运行时生命周期钩子（可选） <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#父子应用通讯" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="父子应用通讯"><!--[--><!--]--> 父子应用通讯 <!--[--><!--]--></a><ul class="sidebar-sub-items"><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#配合-usemodel-使用" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="配合 useModel 使用"><!--[--><!--]--> 配合 useModel 使用 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#基于-props-传递" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="基于 props 传递"><!--[--><!--]--> 基于 props 传递 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#microapp" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="MicroApp"><!--[--><!--]--> MicroApp <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/fes.js/reference/plugin/plugins/qiankun.html#microappwithmemohistory" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="MicroAppWithMemoHistory"><!--[--><!--]--> MicroAppWithMemoHistory <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--></li></ul><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/sass.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/editor.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/pinia.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/plugins/watermark.html" class="nav-link sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><p class="sidebar-heading sidebar-item">插件开发</p><ul class=""><li><!--[--><a href="/fes.js/reference/plugin/dev/" class="nav-link sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a href="/fes.js/reference/plugin/dev/api.html" class="nav-link sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="fesjs-plugin-qiankun" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-qiankun" aria-hidden="true">#</a> @fesjs/plugin-qiankun</h1><p>Fes.js plugin for <a href="https://qiankun.umijs.org/" target="_blank" rel="noopener noreferrer">qiankun<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a>，参考<a href="https://umijs.org/zh-CN/plugins/plugin-qiankun#MicroApp" target="_blank" rel="noopener noreferrer">@umijs/plugin-qiankun<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span></a> 实现，喜欢 React 的同学推荐直接用 Umi。</p><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 <code>package.json</code> 中引入依赖：</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">&quot;@fesjs/fes&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.0.0&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;@fesjs/plugin-qiankun&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.0.0&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>有一种痛叫接手老项目，技术栈老旧，内容多，还要继续维护~</p><p>可能目前迁移、升级老项目最好的解决方案就是微前端。<code>plugin-qiankun</code> 是基于 <code>qiankun</code> 实现的 Fes.js 微前端解决方案。</p><h2 id="主应用配置" tabindex="-1"><a class="header-anchor" href="#主应用配置" aria-hidden="true">#</a> 主应用配置</h2><h3 id="第一步-注册子应用" tabindex="-1"><a class="header-anchor" href="#第一步-注册子应用" aria-hidden="true">#</a> 第一步：注册子应用</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">qiankun</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">main</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 注册子应用信息</span>
<span class="token literal-property property">apps</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;app1&#39;</span><span class="token punctuation">,</span> <span class="token comment">// 唯一 id</span>
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">&#39;//localhost:8001&#39;</span><span class="token punctuation">,</span> <span class="token comment">// html entry</span>
<span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token comment">// 传递给子应用的数据</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;app2&#39;</span><span class="token punctuation">,</span> <span class="token comment">// 唯一 id</span>
<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">&#39;//localhost:8002&#39;</span><span class="token punctuation">,</span> <span class="token comment">// html entry</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h3 id="第二步-装载子应用" tabindex="-1"><a class="header-anchor" href="#第二步-装载子应用" aria-hidden="true">#</a> 第二步：装载子应用</h3><h4 id="使用路由绑定的方式" tabindex="-1"><a class="header-anchor" href="#使用路由绑定的方式" aria-hidden="true">#</a> 使用路由绑定的方式</h4><div class="custom-container warning"><p class="custom-container-title">注意</p><p>主应用和子应用需要自行适配路由路径！！！待完善...</p></div><p>假设我们的系统之前有这样的一些路由：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/src/.fes/plugin-layout/index.js&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;children&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/onepiece&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/onepiece&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;onepiece&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;meta&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;onepiece&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;onepiece&quot;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p>我们现在想在 <code>/son</code> 加载子应用 <code>app1</code>，只需要增加这样一些配置即可：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">router</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/src/.fes/plugin-layout/index.js&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;children&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/onepiece&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;component&quot;</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">&#39;@/pages/onepiece&#39;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;onepiece&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;meta&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;onepiece&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;onepiece&quot;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token string-property property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/son&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;meta&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;son&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;子应用&quot;</span><span class="token punctuation">,</span>
<span class="token string-property property">&quot;microApp&quot;</span><span class="token operator">:</span> <span class="token string">&quot;app1&quot;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br></div><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><p>当前我们依然提倡约定路由的方式，在<code>src/pages</code> 目录新建 <code>son.vue</code>：</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>config</span><span class="token punctuation">&gt;</span></span>
{
&quot;name&quot;: &quot;son&quot;,
&quot;title&quot;: &quot;子应用&quot;,
&quot;microApp&quot;: &quot;app1&quot;
}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>config</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="使用-microapp-组件的方式" tabindex="-1"><a class="header-anchor" href="#使用-microapp-组件的方式" aria-hidden="true">#</a> 使用 <code>&lt;MicroApp /&gt;</code> 组件的方式</h4><div class="custom-container tip"><p class="custom-container-title">提示</p><p>建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上，否则很容易出现子应用加载了，但是页面没有渲染出来的情况。</p></div><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">&quot;app1&quot;</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
name
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h4 id="使用-microappwithmemohistory-组件的方式" tabindex="-1"><a class="header-anchor" href="#使用-microappwithmemohistory-组件的方式" aria-hidden="true">#</a> 使用 <code>&lt;MicroAppWithMemoHistory /&gt;</code> 组件的方式</h4><p>如果我们的路由使用 <code>history</code> 模式，那么在使用乾坤时还算方便，主应用和子应用的路由根据base可以很方便的匹配起来，而且不存在冲突。但是当我们使用 <code>hash</code> 模式时，就问题很大，主应用和子应用的路由必须一样才可以匹配上，用起来贼不方便。而且不能在一个页面上同时加载多个子应用，路由存在冲突！这时候，<code>&lt;MicroAppWithMemoHistory /&gt;</code> 出现了，完美解决上面的问题。</p><p><code>&lt;MicroAppWithMemoHistory /&gt;</code> 相比 <code>&lt;MicroApp /&gt;</code> ，需要多传入 <code>url</code> 参数，用于指定加载子应用什么路由页面。</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">&quot;app1&quot;</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
name
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="子应用配置" tabindex="-1"><a class="header-anchor" href="#子应用配置" aria-hidden="true">#</a> 子应用配置</h2><h3 id="第一步-插件注册" tabindex="-1"><a class="header-anchor" href="#第一步-插件注册" aria-hidden="true">#</a> 第一步：插件注册</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">qiankun</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">micro</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="第二步-配置运行时生命周期钩子-可选" tabindex="-1"><a class="header-anchor" href="#第二步-配置运行时生命周期钩子-可选" aria-hidden="true">#</a> 第二步：配置运行时生命周期钩子（可选）</h3><p>插件会自动为你创建好 <code>qiankun</code> 子应用需要的生命周期钩子，但是如果你想在生命周期期间加一些自定义逻辑，可以在子应用的 <code>src/app.js</code> 里导出 <code>qiankun</code> 对象，并实现每一个生命周期钩子，其中钩子函数的入参 <code>props</code> 由主应用自动注入。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> qiankun <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token comment">// 应用加载之前</span>
<span class="token keyword">async</span> <span class="token function">bootstrap</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;app1 bootstrap&#39;</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 应用 render 之前触发</span>
<span class="token keyword">async</span> <span class="token function">mount</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;app1 mount&#39;</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 当 props 更新时触发</span>
<span class="token keyword">async</span> <span class="token function">update</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;app1 update&#39;</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 应用卸载之后触发</span>
<span class="token keyword">async</span> <span class="token function">unmount</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;app1 unmount&#39;</span><span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h2 id="父子应用通讯" tabindex="-1"><a class="header-anchor" href="#父子应用通讯" aria-hidden="true">#</a> 父子应用通讯</h2><p>有两种方式实现</p><h3 id="配合-usemodel-使用" tabindex="-1"><a class="header-anchor" href="#配合-usemodel-使用" aria-hidden="true">#</a> 配合 <a href="/fes.js/reference/plugin/plugins/model.html" class="">useModel</a> 使用</h3><p>确保已经安装了 <code>@fesjs/plugin-model</code>：</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">&quot;@fesjs/fes&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.0.0&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;@fesjs/plugin-model&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.0.0&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h4 id="主应用传递-props" tabindex="-1"><a class="header-anchor" href="#主应用传递-props" aria-hidden="true">#</a> 主应用传递 props</h4><ul><li>如果使用 <code>MicroApp</code> 组件模式消费子应用，直接通过 props 传递即可：</li></ul><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>MicroApp</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:user</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>user<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> MicroApp <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">&quot;app1&quot;</span>
<span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span><span class="token punctuation">)</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
name<span class="token punctuation">,</span>
user
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><ul><li>如果使用路由绑定式消费子应用，那么约定<code>src/models/qiankunStateForMicro.js</code> 的模型数据将作为 <code>props</code> 船体给子应用，如：</li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
state
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h4 id="子应用消费-props" tabindex="-1"><a class="header-anchor" href="#子应用消费-props" aria-hidden="true">#</a> 子应用消费 props</h4><p>子应用中会自动生成一个全局名为 <code>qiankunStateFromMain</code> 的 <code>model</code>， 可以在任意组件中获取主应用透传的 <code>props</code> 的值。</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">const</span> mainState <span class="token operator">=</span> <span class="token function">useModel</span><span class="token punctuation">(</span><span class="token string">&#39;qiankunStateFromMain&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
mainState
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="基于-props-传递" tabindex="-1"><a class="header-anchor" href="#基于-props-传递" aria-hidden="true">#</a> 基于 props 传递</h3><ul><li>主应用使用 props 的模式传递数据（参考主应用装载子应用配置一节）</li><li>子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节）</li></ul><h3 id="microapp" tabindex="-1"><a class="header-anchor" href="#microapp" aria-hidden="true">#</a> MicroApp</h3><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>子应用名称，传入<code>qiankun.main.apps</code>配置中的<code>name</code></td><td>String</td><td>-</td></tr><tr><td>settings</td><td>子应用配置信息</td><td>Object</td><td>{}</td></tr><tr><td>props</td><td>传入子应用的参数</td><td>Object</td><td>{}</td></tr><tr><td>lifeCycles</td><td>子应用生命周期钩子</td><td>Object</td><td>{}</td></tr><tr><td>cacheName</td><td>子应用缓存名称，配置后根据<code>name</code>+<code>cacheName</code>缓存子应用实例</td><td>Object</td><td>-</td></tr></tbody></table><h3 id="microappwithmemohistory" tabindex="-1"><a class="header-anchor" href="#microappwithmemohistory" aria-hidden="true">#</a> MicroAppWithMemoHistory</h3><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>子应用名称，传入<code>qiankun.main.apps</code>配置中的<code>name</code></td><td>String</td><td>-</td></tr><tr><td>settings</td><td>子应用配置信息</td><td>Object</td><td>{}</td></tr><tr><td>props</td><td>传入子应用的参数</td><td>Object</td><td>{}</td></tr><tr><td>lifeCycles</td><td>子应用生命周期钩子</td><td>Object</td><td>{}</td></tr><tr><td>cacheName</td><td>子应用缓存名称，配置后根据<code>name</code>+<code>cacheName</code>缓存子应用实例</td><td>Object</td><td>-</td></tr><tr><td>url</td><td>子应用的路由地址</td><td>String</td><td>-</td></tr></tbody></table><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="nav-link external meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/vue3/docs/reference/plugin/plugins/qiankun.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">在新窗口打开</span><!--]--></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">harrywan</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/plugins/vuex.html" class="nav-link" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/reference/plugin/plugins/windicss.html" class="nav-link" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div>
<script src="/fes.js/assets/js/runtime~app.e7cf0416.js" defer></script><script src="/fes.js/assets/js/519.22262c34.js" defer></script><script src="/fes.js/assets/js/app.704a6fe6.js" defer></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink