微前端的使用和注意事项 - qiankun

一、为什么使用微前端

  • 微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用(Frontend Monolith)后,随之而来的应用不可维护的问题。
  • 微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用。
  • 微前端的核心价值在于 "技术栈无关"。

二、使用方式

三、主应用和微应用间通信

可参考:https://juejin.cn/post/6844904151231496200

  • qiankun 官方提供的通信方式

Actions 通信。

  • 使用Vuex进行状态管理

在做微前端集成时,将主应用的store共享给所有微应用

  1. 主应用向微应用传递store实例

    registerMicroApps(
    [
    {
    name: "chai-project",
    entry: "//localhost:8080",
    container: '#yourContainer',
    activeRule: "/chaiQiankunTest/ffff",
    props: {
    store //共享主应用的store实例
    }
    }
    ],
    {
    beforeLoad: [
    app => {
    console.log("before load", app);
    }
    ], // 挂载前回调
    beforeMount: [
    app => {
    console.log("before mount", app);
    }
    ], // 挂载后回调
    afterUnmount: [
    app => {
    console.log("after unload", app);
    }
    ] // 卸载后回调
    }
    )

  2. 微应用使用主应用共享的store实例

    import Vuex from 'vuex'
    Vue.use(Vuex);
    function render (props) {
    const store = props.store;
    // 在 render 中创建 VueRouter,可以保证在卸载微应用时,移除 location 事件监听,防止事件污染
    router = new Router({
    // 运行在主应用中时,添加路由命名空间 /chaiQiankunTest/ffff
    base: window.POWERED_BY_QIANKUN ? 'chaiQiankunTest/ffff' : '/',
    mode: 'history',
    routes
    });

    // 挂载应用
    instance = new Vue({
    router,
    store,//主应用共享的store实例
    render: (h) => h(App)
    }).$mount('#app');
    }

四、注意事项

  • 微应用之间如何跳转

微应用之间的跳转,或者微应用跳主应用页面,直接使用微应用的路由实例是不行的,如 react-router 的 Link 组件或 vue 的 router-link,原因是微应用的路由实例跳转都基于路由的 base。

有以下几种办法可以跳转:

  1. history.pushState()

  2. 直接使用原生 a 标签写完整地址

    app1

  3. 修改 location href 跳转

    window.location.href = 'http://localhost:8080/app1'

相关推荐
zhougl99624 分钟前
html处理Base文件流
linux·前端·html
花花鱼28 分钟前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_31 分钟前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷6 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript