Comments (16)
这是一个好问题,后续官方会出专门的demo来指导
假如主应用 有A、B、C三个菜单对应子应用 subapp 的 a、b、c 三个页面
1、子应用如果是运行在单例模式下(做了生命周期适配),那么 A、B、C 菜单对应的主应用的页面中 <wujie-vue>
标签的 name 设置成相同名字,url 对应子应用 a、b、c 页面的url即可
这样可以共享一个wujie实例,承载子应用js的iframe也实现了共享,不用页面子应用的url不同,切换菜单的过程相当于:销毁当前应用实例 => 同步新路由 => 创建新应用实例
2、子应用如果运行在保活模式下(alive=ture),那么,在主应用的不同页面中 只要 name 相同子应用就不会销毁新建,一直复用之前渲染出来的实例,这个时候怎么办呢,可以采用通信的方式
主应用切换菜单栏的时候调用: bus.$emit('route-change', path)
子应用在app.vue 的 mounted 生命周期可以监听:
mounted() {
if (window.__POWERED_BY_WUJIE__) {
window.$wujie.bus.$on("route-change", (path) => {
this.$router.push({ path: `/${path}` });
});
}
},
3、子应用运行在重建模式下(alive=false && 没有做生命周期适配),按照 1 即可
from wujie.
@SericXu 我周末出一个demo哈,不用多个子应用标签,一个子应用标签,动态 url 就好了
from wujie.
@ztaom @SericXu demo已经出了,可以参照demo来应对这个场景
from wujie.
希望出一个demo,目前试了一下保活模式,在主工程中,只有先点击到子应用之后,再点击菜单才能正常切换
from wujie.
@ztaom 可能要到周末才能有时间
from wujie.
使用第一种方法的话,是不是就需要在主应用中配置多个子应用标签,分别对应主应用的菜单?
如果是这样的话,我想在主应用动态生成子应用菜单(想偷懒orz)的这种情况下是不是就有点麻烦?有没有办法可以实现去匹配子应用路由。比如通过给子应用添加某个属性或者Api以供调用。
from wujie.
@SericXu 我周末出一个demo哈,不用多个子应用标签,一个子应用标签,动态 url 就好了
动态url确实可以,这个我想过,这么一来,是不是我就得在主应用去配置好所有的子应用的路由。总感觉有点别扭,说不出来 XD,等后续我再琢磨琢磨怎么个意思。哈哈
我在想有没有可能实现在主应用打开子应用页面的时候,我传一个router对象或者path之类的参数,使子应用打开指定的页面。这样是不是更方便一点。
from wujie.
可以的,直接方式 2 保活模式,主应用直接告诉子应用要怎么跳,子应用根据参数自行跳转,这样也就解耦了
from wujie.
@yiludege 我按照demo改了一下,现在初始化第一次点击菜单没问题,再切换另一个菜单vue router会报错,不知是不是版本问题,我用的路由版本[email protected];详情如下:
初始化页面:
第一次点击菜单,没问题:
切换菜单,页面无反应,vue-router报错:
from wujie.
另外,当采用preloadApp的时候,无论preloadApp是否开启保活,WujieVue标签是不是不能再使用alive保活属性?
当我给标签也添加保活属性是,会打开子应用,但是空白,貌似路由没有加在路由上。类似这样的情况:
正确路由 => http://localhost:3000/assets/collect?assets=%2Fcollect
实际路由 => http://localhost:3000/assets/collect?assets=%2F
from wujie.
@yiludege 我按照demo改了一下,现在初始化第一次点击菜单没问题,再切换另一个菜单vue router会报错,不知是不是版本问题
demo中,vue3、vite的 router都是4.x的版本,保活模式按照demo即可,单例模式下,window.__WUJIE_MOUNT每次新建路由
from wujie.
另外,当采用preloadApp的时候,无论preloadApp是否开启保活
preloadApp的 url 和 wujie-vue 的 url 保持一致呢?
from wujie.
demo中,vue3、vite的 router都是4.x的版本,保活模式按照demo即可,单例模式下,window.__WUJIE_MOUNT每次新建路由
以下是我目前的代码,配置基本都和demo一致
子应用配置
// main.js
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();
};
window.__WUJIE.mount()
} else {
createApp(App)
.use(createRouter({ history: createWebHistory(), routes }))
.mount("#app");
}
// router
const router = createRouter({
history: createWebHistory(),
routes: [{
path: '/',
children:[
{
path: 'home',
name: 'home',
component: Home
},
{
path: 'collect',
name: 'collect',
component: Collect
},
{
path: 'offline_assets',
name: 'offline_assets',
component: OfflineAssets
},
]
}]
})
父应用配置
// 标签
<WujieVue
width="100%"
height="100%"
name="assets"
:url="url" // url = ref("//localhost:4000/" + (route.params.path ? `${route.params.path}` : ""))
:sync="true"
:fetch="fetch"
:props="props"
:beforeLoad="lifecycles.beforeLoad"
:beforeMount="lifecycles.beforeMount"
:afterMount="lifecycles.afterMount"
:beforeUnmount="lifecycles.beforeUnmount"
:afterUnmount="lifecycles.afterUnmount"
:activated="lifecycles.activated"
:deactivated="lifecycles.deactivated"
:loadError="lifecycles.loadError"
></WujieVue>
// router
const router = createRouter({
history: createWebHistory(),
routes: [{
path: 'home',
name: 'home',
component: Home,
},
{
path: '/assets/:path',
name: 'assets',
component: Assets
}]
})
from wujie.
:alive="true" 的话,需要采用通信的方式来跳转,详情看看vue3的这个demo呢
from wujie.
已解决
@yiludege 我按照demo改了一下,现在初始化第一次点击菜单没问题,再切换另一个菜单vue router会报错,不知是不是版本问题,我用的路由版本[email protected];详情如下:
首先,子应用路由不激活的问题已解决,友情提醒,
router-view
的key
很重要!!!:
其次,切换菜单时vue-router
报错警告,导致子应用路由没有匹配,可能是报错导致中断了,还在踩坑中;
具体警告如下:
[Vue Router warn]: history.state seems to have been manually replaced without preserving the necessary values. Make sure to preserve existing history state if you are manually calling history.replaceState:
history.replaceState(history.state, '', url)
You can find more information at https://next.router.vuejs.org/guide/migration/#usage-of-history-state.
from wujie.
已解决
@yiludege 我按照demo改了一下,现在初始化第一次点击菜单没问题,再切换另一个菜单vue router会报错,不知是不是版本问题,我用的路由版本[email protected];详情如下:
首先,子应用路由不激活的问题已解决,友情提醒,
router-view
的key
很重要!!!:其次,切换菜单时vue-router
报错警告,导致子应用路由没有匹配,可能是报错导致中断了,还在踩坑中;
具体警告如下:[Vue Router warn]: history.state seems to have been manually replaced without preserving the necessary values. Make sure to preserve existing history state if you are manually calling history.replaceState: history.replaceState(history.state, '', url) You can find more information at https://next.router.vuejs.org/guide/migration/#usage-of-history-state.
请问大佬,你这个问题解决了吗?能发一个demo参考一下吗?
from wujie.
Related Issues (20)
- 主应用和子应用为用一个工程,子应用偶发白屏 HOT 2
- 子应用在CDN中引入了地图框架Cesium,加载子应用时报错DOMException: Failed to construct 'Worker': Script at 'http://localhost:9081/cdn/cesium/Workers/cesiumWorkerBootstrapper.js' cannot be accessed from origin 'http://localhost:8080'. HOT 1
- WujieReact loading props not work
- 移动端 safari 浏览器 通过手势侧滑返回会闪屏
- 主应用内添加子应用初始化启动浏览器控制台报错
- 子应用 CSS 文件重复加载
- 单例模式下,cssBeforeLoaders在首次加载时生效,切换页面再次回到子应用所在页面,cssBeforeLoaders添加的css代码消失
- 子应用内存增加之后,主应用页面崩溃,报错STATUS_INTEGER_DIVIDE_BY_ZERO
- 内存占用太夸张了,一晚上翻了一倍 HOT 4
- 在子应用中,document.querySelector(":root") 返回的是null
- 微应用使用单例模式并且使用element-plus时报错
- wujie嵌入两个子应用 ag grid,ag grid拖拽功能失效 HOT 2
- 有没有可能,一个子应用的两个页面,在主应用的同一屏中显示,并且使用一个 iframe? HOT 1
- poper.js在v2有定位问题,在v3里没有
- cssIgnores,注入的link丢失部分配置 HOT 1
- wujie 对于 react18 + vite 支持是否友好?
- 子应用切换路由 父路由下面几个子路由切换 界面一直重新加载问题 HOT 1
- 切换路由 dom节点持续增加 内存持续增加 深刷新才会释放
- wujie无法接入next项目 有什么好解决方案吗
- 接入 vite+vue3+arco 弹窗无法全屏
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wujie.