|
@@ -13,10 +13,11 @@ yarn add @jianyu/easy-inject-qiankun --dev
|
|
|
## Usage
|
|
|
|
|
|
```javascript
|
|
|
-// main.js
|
|
|
+// # 子应用 main.js
|
|
|
+// [可选] 修改 __webpack_public_path__
|
|
|
+import '@jianyu/easy-inject-qiankun/src/pre-mount'
|
|
|
|
|
|
// 自动判断环境初始化子应用、注册子应用钩子
|
|
|
-
|
|
|
export const { bootstrap, mount, unmount } = easySubAppRegister({
|
|
|
Vue,
|
|
|
router,
|
|
@@ -31,6 +32,70 @@ export const { bootstrap, mount, unmount } = easySubAppRegister({
|
|
|
export const { bootstrap, mount, unmount } = subAppRegister({
|
|
|
render
|
|
|
})
|
|
|
+
|
|
|
+// qiankun hooks
|
|
|
+export const { bootstrap, mount, unmount } = easySubAppRegister({
|
|
|
+ Vue,
|
|
|
+ router,
|
|
|
+ store,
|
|
|
+ App,
|
|
|
+ el: '#app'
|
|
|
+}, Lifecycle)
|
|
|
+
|
|
|
+
|
|
|
+// 子应用是否可独立渲染,非 'development' 时不渲染,默认值 'development'
|
|
|
+export const { bootstrap, mount, unmount } = easySubAppRegister({
|
|
|
+ Vue,
|
|
|
+ router,
|
|
|
+ store,
|
|
|
+ App,
|
|
|
+ el: '#app'
|
|
|
+}, Lifecycle, 'development')
|
|
|
+```
|
|
|
+### Extended use
|
|
|
+```
|
|
|
+// 【基座】配置,可前往参考工作桌面应用
|
|
|
+registerMicroApps([
|
|
|
+ ...
|
|
|
+ props: {
|
|
|
+ // 路由变量
|
|
|
+ __QIANKUN_ROUTER_BASE: '路由配置,同 activeRule',
|
|
|
+ // 钩子配置
|
|
|
+ hooks: {
|
|
|
+ // 示例: 子应用调用该方法,打开外部链接
|
|
|
+ openLink ({ link, options = {} }) {}
|
|
|
+ },
|
|
|
+ className: 'in-app'
|
|
|
+ }
|
|
|
+], {
|
|
|
+ beforeLoad: (app) => {
|
|
|
+ // 通过钩子自动注入路由路径
|
|
|
+ if (app.props.__QIANKUN_ROUTER_BASE) {
|
|
|
+ window.__QIANKUN_ROUTER_BASE = app.props.__QIANKUN_ROUTER_BASE
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+```
|
|
|
+
|
|
|
+```javascript
|
|
|
+// 子应用调用基座钩子
|
|
|
+// 基座 hooks 钩子已经自动注入到 Vue.prototype.$BraceHooks
|
|
|
+import { tryCallHooks } from '@jianyu/easy-inject-qiankun'
|
|
|
+
|
|
|
+/**
|
|
|
+ * 尝试函数调用
|
|
|
+ * @param hooks
|
|
|
+ * @param fn
|
|
|
+ * @param arg
|
|
|
+ * @param spareFn - 备用函数
|
|
|
+ * @returns {*}
|
|
|
+ */
|
|
|
+
|
|
|
+tryCallHooks(this.$BraceHooks, 'openLink', {
|
|
|
+ link: 'xxx'
|
|
|
+}, () => {
|
|
|
+ location.href = 'xxx'
|
|
|
+})
|
|
|
```
|
|
|
|
|
|
|