vue3+vite模块联邦 ----子应用中页面如何跳转传参

基座:

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': {},
				}
			})
	]
})
相关推荐
零基础的修炼16 小时前
算法---常见位运算总结
java·开发语言·前端
wgslucky16 小时前
sm2 js加密,java服务器端解密
java·开发语言·javascript
韩立学长16 小时前
【开题答辩实录分享】以《在线预问诊系统设计与实现》为例进行选题答辩实录分享
vue.js·spring boot·mysql
wuhen_n17 小时前
@types 包的工作原理与最佳实践
前端·javascript·typescript
我是伪码农17 小时前
Vue 1.27
前端·javascript·vue.js
秋名山大前端17 小时前
前端大规模 3D 轨迹数据可视化系统的性能优化实践
前端·3d·性能优化
H79987424217 小时前
2026动态捕捉推荐:8款专业产品全方位测评
大数据·前端·人工智能
ct97817 小时前
Cesium 矩阵系统详解
前端·线性代数·矩阵·gis·webgl
小陈phd17 小时前
langGraph从入门到精通(十一)——基于langgraph构建复杂工具应用的ReAct自治代理
前端·人工智能·react.js·自然语言处理
我要敲一万行17 小时前
前端面试erp项目常问问题
前端·面试