wordpress调用当前页文章,长春企业网站排名优化,免费建站软件哪个好,网站的域名证书一、为什么使用微前端
微前端架构旨在解决单体应用在一个相对长的时间跨度下#xff0c;由于参与的人员、团队的增多、变迁#xff0c;从一个普通应用演变成一个巨石应用(Frontend Monolith)后#xff0c;随之而来的应用不可维护的问题。微前端的核心目标是将巨石应用拆解成…一、为什么使用微前端
微前端架构旨在解决单体应用在一个相对长的时间跨度下由于参与的人员、团队的增多、变迁从一个普通应用演变成一个巨石应用(Frontend Monolith)后随之而来的应用不可维护的问题。微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用。微前端的核心价值在于 技术栈无关”。
二、使用方式
https://qiankun.umijs.org/zh/guide/getting-started
三、主应用和微应用间通信 可参考https://juejin.cn/post/6844904151231496200 qiankun 官方提供的通信方式 Actions 通信。 使用Vuex进行状态管理 在做微前端集成时将主应用的store共享给所有微应用 主应用向微应用传递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);}] // 卸载后回调})微应用使用主应用共享的store实例
import Vuex from vuex
Vue.use(Vuex);
function render (props) {const store props.store;// 在 render 中创建 VueRouter可以保证在卸载微应用时移除 location 事件监听防止事件污染router new Router({// 运行在主应用中时添加路由命名空间 /chaiQiankunTest/ffffbase: 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。 有以下几种办法可以跳转
history.pushState()直接使用原生 a 标签写完整地址
a hrefhttp://localhost:8080/app1app1/a修改 location href 跳转
window.location.href http://localhost:8080/app1
