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

相关推荐
雯0609~20 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ23 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z29 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省1 小时前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript