Coder Social home page Coder Social logo

Comments (3)

dongoa avatar dongoa commented on July 21, 2024

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

from micro-app-demo.

liuruibin avatar liuruibin commented on July 21, 2024

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

from micro-app-demo.

a1067111756 avatar a1067111756 commented on July 21, 2024

我也有此需求,我基座应用是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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.