Comments (3)
react 双hash路由 貌似只能访问 #之前的主页
from micro-app-demo.
我也有此需求,主应用子应用都是 vite vue
from micro-app-demo.
我也有此需求,我基座应用是electrion + vite + vue3, 子应用是普通web项目vite + vue3。由于基座应用是electrion,路由只能使用hash模式,开发环境正常的,正式环境跳转到子应用出现白屏,子应用路由匹配失败。
分析:基座应用使用hash, 跳转子应用时候router.push('/child-app'), 访问地址就变为了http://xxxxx.com/#/child-app, 子应用路由中是没有/child-app这个路由规则,就导致router-view视图匹配失败
解决方案:我采取了一个取巧的方式,在子应用路由规则中注册了一条规则 { path: '/child-app', redirect: '/login' }, 当子应用监测到访问地址就变为了http://xxxxx.com/#/child-app时路由会重定向到http://xxxxx.com/#/login,这样就解决了子应用路由匹配失败的问题。
副作用:经过测试确实是有效的,但是存在一个问题,在刷新页面时,基座应用匹配不到路由会再次导致加载子应用失效。由于我基座应用是electrion,并不会出现手动刷新页面的情况。这个副作用其实可以在基座应用做一些patch操作去处理,比如监测路由刷新的是子应用的地址,可以重新手动定向到子应用走一次刚才的流程
tip: 这只是一个取巧的方法,一些场景中可能会出现意想不到的情况,希望有大佬能提出一些更稳妥的解决方案,如果官方能提出解决方案更好。毕竟主/子应用的路由方式会根据实际场景选择不同的形式,现在主应用使用hash的形式确实存在很大的问题
from micro-app-demo.
Related Issues (20)
- 主应用可以在非引用子应用的页面给子应用发数据吗 HOT 4
- angular13项目,子应用之间切换,ngOnDestroy生命周期没有触发 HOT 1
- 新增纯js案例加载出错
- 添加shadowDOM属性无法渲染
- demo中vite-vue3基座打包后的问题
- 请问微前端多个子仓库是怎么管理的
- microApp.start()后window.__MICRO_APP_ENVIRONMENT__ 获取不到,是undefined,是怎么回事呢? HOT 3
- 示例中的child_apps>vite3+vue3判断微前端环境的变量写错了
- micro app 目前不支持 vite3项目吗?报错 HOT 2
- baseroute可以动态传进去吗 HOT 2
- react作为子应用时,在入口文件中如何跳转路由
- 子应用报socket错误
- 需要说明Node 版本, webpack或者其他全局依赖的版本,我本地都是最高版本,启动不起来,单个子应用也起不来 HOT 1
- 子应用使用用uniapp,主应用使用vue能否兼容?
- client.ts:69 [vite] failed to connect to websocket (SyntaxError: Failed to construct 'WebSocket': The URL 'ws://:/vite-vue3-micro/' is invalid.).
- demo示例中, vite子应用的元素设置背景图, 会出现, 子应用的背景图地址的端口用的是基座应用的端口, 导致图片404 HOT 1
- 基座为vue2,子应用为vite+vue3。第一次加载子应用页面展示没问题,销毁子应用到其他页面,再次加载vite+vue3子应用,页面没有暂示
- 子应用是 vite项目 ,路由支持history模式么 HOT 3
- 子应用启动的是vue3-vite 导致白屏问题(主应用也是vite-vue3) HOT 2
- 能说明下node版本么?不同的包版本依赖不一样
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 micro-app-demo.