router
router copied to clipboard
Unable to sync host and remote Vue routers using Module Federation
Reproduction
https://stackblitz.com/edit/github-vsw8ta-jmb12sfz?file=app1%2Fsrc%2Fviews%2FRemoteView.vue,app2%2Fsrc%2Fexport-app.ts
Steps to reproduce the bug
- Go to the host application's homepage.
- Click on the "Remote Home" link (loads remote app).
- Then click on the "Remote About" link.
- Observe that the view does not change even though the URL updates.
- Click again on "Remote Home", then again on "Remote About".
- Now the view updates as expected.
- Alternatively:
- Click on "Remote Home" in the host.
- Then use a link inside the remote app to navigate to "Remote About".
- Observe that the host router does not track this route change.
- Also, you can't return to "Remote Home" via internal navigation anymore.
Expected behavior
The host and remote applications should stay in sync when navigating through links both in the host and inside the remote app.
Navigating within the remote app should update the URL and router state in the host, and views should update accordingly.
Actual behavior
- Route path in the URL updates, but the remote view does not change immediately.
- Clicking the same links again forces a view update.
- When using internal navigation inside the remote app, the host does not reflect the route change:
- Host router state is not updated.
- Active links are not updated.
- Navigation becomes broken or unresponsive.
Additional information
- I'm using
@module-federation/viteand@module-federation/bridge-vue3. - Each app has its own Vue router.
- I attempted to use a shared
WebHistoryinstance, as suggested here:
https://github.com/vuejs/router/issues/1071#issuecomment-898914828
It's important for me to keep the host and remote apps separate.
I'd appreciate any suggestions on how to properly sync or share routing between them.