接入 qiankun 的四条注意事项

一 两种注册方式: registerMicroApps 以及 loadMicroApp 都支持带路由的子应用

二 entry 能指定为子应用具体页面吗?

默认情况下, 只能写根 /路径, qiankun 也支持修改

entry 最终作为子应用 fetch async chunk 的 baseUrl

1. __INJECTED_PUBLIC_PATH_BY_QIANKUN__ = entry

2. __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__

默认情况下, 只能写根 /路径,是因为 entry 的截取规则为

// 源码地址: https://github.com/kuitos/import-html-entry/blob/ab3e788ee868177ecf407f79b00d52ca2e2cdd47/src/utils.js#L84
 function defaultGetPublicPath(entry) {
	if (typeof entry === 'object') {
		return '/';
	}
	try {
		// URL 构造函数不支持使用 // 前缀的 url
		const { origin, pathname } = new URL(entry.startsWith('//') ? `${location.protocol}${entry}` : entry, location.href);
		const paths = pathname.split('/');
		// 移除最后一个元素
		paths.pop();
		return `${origin}${paths.join('/')}/`;
	} catch (e) {
		console.warn(e);
		return '';
	}
}


 let entry  =  `http://localhost:4011/process1/form1/sasa`
 defaultGetPublicPath(entry) // http://localhost:4011/process1/form1/

作为子应用 fetch async chunk 的 baseUrl

假设 entry 为 : http://localhost:4011/process1/form1/sasa

如要实现跳转到子应用指定页面, 则通过修改 getPublicPath 的方式来修改子应用 的 baseUrl

// registerMicroApps
start({
    getPublicPath: (entry) => new URL(entry).origin + '/'
})
// loadMicroApp
loadMicroApp({},{
    getPublicPath: (entry) => new URL(entry).origin + '/'
})

三 子应用需要在 render(){} 中 new VueRouter

常规用法是:

import router from './router' 

new Vue({
    router
})

因为要修改 子应用 router 的 base, 且 import 导入的变量不能被修改, 所以需要在 render 中 new VueRouter

四 路由记录以及激活路由

如果主应用没有使用任何路由库, 那么可以直接 history.pushState(null, '', '/vue-app') 到激活路由即可

如果主应用使用了: vue-router ,那么主应用的路由表里需要有相应激活路由的路由记录(path: /vue-app/*), 因为路由匹配规则是:

• 扁平化路由表里的所有路由记录, 然后去匹配完整的 url

有个容易被忽略的点: vue-router 的 push 只是简单的 history.pushState的封装, 使用 router.push 时, 不需要考虑当前处于哪个应用的 router 上下文

如果需要主应用加载后跳转到子应用, 直接使用 history.push 或者是 router.push 都是一样的效果

对接过程中发现个关于 vue-router 的注意事项:

router.push({name:'',query:{},params:{}})

尝试把 name query params 一起传递时,是不会生效的, 需要用自己用 path 把完整的路径拼出来