**其他网站有很多如何引入,使用的案例,但是按部就班的做了还是有一些问题,因此来此在总结下:
vue2x使用qiankun框架经历
实现:
1、父子组件相互跳转
2、父-子传参,子接收
3、子使用父的组件
遇到问题:
1、路由跳转不成功
2、父子样式冲突
3、this.$router.push跳转问题,改为window.history.pushState跳转后,除了第一次主跳子,第二次会跳转到错误页面问题解决
**
第一步 :安装 npm i qiankun -S
第二步:在主应用src目录下创建文件夹micros,俩个js文件 app.js 和 index.js.如图
app.js文件内容:
/**
app.js导出的是上面registerMicroApps的第一个参数,是一个对象数组,其中数组每个字段的作用如下:
(1)name:微应用的名称,后面改造微应用的时候一定要与这个name对应
(2)entry:微应用运行的域名加端口,我用的是本地8088端口
(3)container:启动微应用需要一个dom容器,里面就是这个dom容器的 id
(4)activeRule:触发启动微应用的规则,当检测到url中含有activeRule的值时,将启动微应用
当微应用信息注册完之后,一旦浏览器的 url 发生变化,便会自动触发 qiankun 的匹配逻辑,所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中,同时依次调用微应用暴露出的生命周期钩子。
**/
const apps = [
{
name: 'micro-app-order',
entry: '//localhost:9527',
container: '#order-container',
activeRule: '#/resourcesCore'
}
]
export default apps
index.js文件内容:
/**
这里用到了官方的几个api:
(1)registerMicroApps:包含两个参数,第一个参数是微应用的一些注册信息,第二个参数是全局的微应用生命周期钩子。:
(2)addGlobalUncaughtErrorHandler:全局的未捕获异常处理器,微应用发生报错的时候亦可以用这个api捕捉。
(3)start&#x