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)
- 子应用使用CKEditor5富文本编辑器,改变url的query参数重新加载后光标异常 HOT 7
- 子应用的全局变量没有被处理,导致其他脚本中读取全局变量报变量未定义的错误 HOT 2
- 页面中使用多个子应用时,子应用 getSelection() 指向错误 HOT 5
- ![image](https://user-images.githubusercontent.com/24648945/217492767-dcaed8cc-5686-4c60-806e-44d888b501b8.png)
- 子应用嵌套iframe ,iframe内部的 window.parent 指向到了主应用,并非子应用。 HOT 1
- 【功能建议】考虑使用 writable-dom 以浏览器更加标准的方式支持 dom 解析,并加快速度
- 无法进行子应用生命周期改造的情况下,有没有什么方法可以判断wujie加载状态,如果加载失败怎样获取加载失败事件?
- 监听resize 事件的时候 子应用的window.innerHeight window.innerWidth 没有变化
- wujie下spreadjs的自动化问题
- 子应用图片路径解析错误
- 子应用图片路径解析错误
- 子应用image标签使用相对路径,挂在到主应用后默认拼接主应用的域名
- url 进行encode后 ,访问404
- 【文档问题】快速上手无法上手,创建项目建不成功
- 当子应用的head中存在script引入且未设置defer、async时,子应用无法打开
- 部署子应用时加载错误
- 在无界中导航栏是父应用的的内容是子应用
- 单例模式下,来回切换子应用,子应用样式丢失
- 接入子应用后会报 Access-Control-Allow-Origin' header contains multiple values '*, *, *', but only one is allowed HOT 2
- 在火狐浏览器70版本下 @antv/g2plot不会生成图表,单独打开可以生成
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.