笔记无界微前端入门
无界微前端框架笔记
wujie(无界)是腾讯在 2022 年 7 月推出的微前端框架,下面是腾讯前端团队的原话
无界微前端方案基于 webcomponent 容器 iframe 沙箱,能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户的核心诉求。
简单实现
以 vite 创建的两个 vue3 项目为例(分别为主应用 main 和子应用 son1)
- 主应用安装 wujie-vue3 依赖
yarn add wujie-vue3
- 主应用引入 wujie-vue3
/* main项目->main.js */
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
import WujieVue from 'wujie-vue3'
createApp(App).use(router).use(WujieVue).mount('#app')
- 主应用配置路由
/* main项目->router/index.js */
import { createRouter, createWebHistory } from 'vue-router'
export const routes = [
{
path: '/'
},
{
path: '/son-1',
component: () => import('../views/son1.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
<!-- main项目->view/son1.vue -->
<template>
<!--单例模式,name相同则复用一个无界实例,改变url则子应用重新渲染实例到对应路由 -->
<WujieVue width="100%" height="100%" name="son-1" :url="url" :sync="true"></WujieVue>
</template>
<script>
export default {
data() {
return {
url: 'http://localhost:4002/' //这个是子应用开启的服务地址,可在vite.config.js中自行配置
}
}
}
</script>
- 主应用配置路由跳转
<!-- main项目->App.vue -->
<script setup></script>
<template>
<router-link to="/son-1">son1</router-link>
<router-link to="/son-2">son2</router-link>
<router-view></router-view>
</template>
- 子应用接入主应用
/* son1项目->main.js */
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
if (window.__POWERED_BY_WUJIE__) {
let instance
window.__WUJIE_MOUNT = () => {
const router = createRouter({ history: createWebHistory(), routes })
instance = createApp(App)
instance.use(router)
instance.mount('#app')
}
window.__WUJIE_UNMOUNT = () => {
instance.unmount()
}
} else {
createApp(App)
.use(createRouter({ history: createWebHistory(), routes }))
.mount('#app')
}
- 启动子应用和主应用
注意:子应用启用之后的端口域名要对应主应用中的域名
wujie 是如何通过路由去控制子应用的?
路由同步会将子应用路径的 path query hash 通过 window.encodeURIComponent 编码后挂载在主应用 url 的查询参数上,其中 key 值为子应用的 name。
开启路由同步后,刷新浏览器或者将 url 分享出去子应用的路由状态都不会丢失,当一个页面存在多个子应用时无界支持所有子应用路由同步,浏览器刷新、前进、后退子应用路由状态也都不会丢失
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfiaaeg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22