微前端的使用和注意事项 - 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'

相关推荐
前端青山19 分钟前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享1 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf2 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨3 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL3 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1114 小时前
css实现div被图片撑开
前端·css
薛一半4 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾4 小时前
CSS综合练习——懒羊羊网页设计
前端·css
MarcoPage4 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
.net开发4 小时前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf