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': {},
				}
			})
	]
})
相关推荐
触底反弹几秒前
面试官问"Ajax原理",我从XHR讲到async/await,他直接懵了!
前端·面试·架构
Chelsea05222 分钟前
PC浏览器在线调试 Android 浏览器教程-chrome://inspect/#devices
android·前端·chrome
加号35 分钟前
【C#】VS2022 传统 ASP.NET Web 服务(.asmx)接口实现指南
前端·c#·asp.net
小林ixn7 分钟前
前端开发新利器:用Vite+通义万相实现多模态图像生成(附API密钥安全方案)
javascript
Rain50910 分钟前
2.3. 安全配置:环境变量与 API 密钥管理
前端·人工智能·后端·安全·ai·node.js·ai编程
用户9385156350710 分钟前
HTML5 Canvas 从入门到AI驱动游戏开发:手把手教你用原生JS打造飞机游戏与数据可视化
前端·javascript·人工智能
William_Xu11 分钟前
var [a, b] = { a: 1, b: 2 } 解构赋值
前端
用户0595401744612 分钟前
Playwright 网络拦截踩坑实录:我花了 3 小时才搞懂数据持久化验证的正确姿势
前端·css
weedsfly12 分钟前
React 开发中的闭包陷阱:四个真实场景,让你彻底理解闭包
前端·react.js
MariaH13 分钟前
Git Cherry Pick 常用操作
前端