基座:
javascript
// router/index.ts
const router = createRouter({
history: xxx,
routes: [{....}]
}
window._MAIN_ROUTER_ = router
export default router
子应用:
javascript
// a.vue
window._MAIN_ROUTER_.push({
path: '/b',
query: {
id: xxx
}
})
// b.vue中
const route = useRoute()
const id = route?.query?.id
问题:子应用中可以跳转,但是b.vue中id接收不到
原因:子应用中没有独立路由,也没有与基座应用共享 vue-router,导致 useRoute() 返回 undefined
解决方法:在模块联邦配置中共享 vue-router,让子应用能访问基座应用的路由实例
javascript
// vite.config.ts 子应用和基座
export default defineConfig({
plugins: [
....,
federation({
...,
shared: {
...,
'vue-router': {},
}
})
]
})