search

micro-zoe / micro-app-demo

micro-app 案例
MIT License
220 stars 124 forks source link

主应用和子应用都是vue hash模式，能提供demo吗 #2

Open scrushy opened 2 years ago

dongoa commented 2 years ago

react 双hash路由 貌似只能访问 #之前的主页

liuruibin commented 2 years ago

我也有此需求，主应用子应用都是 vite vue

a1067111756 commented 2 years ago

我也有此需求，我基座应用是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的形式确实存在很大的问题