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': {},
				}
			})
	]
})
相关推荐
非凡ghost28 分钟前
遥控精灵APP(手机家电遥控器)
前端·windows·智能手机·firefox·软件需求
ohyeah29 分钟前
React 自定义 Hook 实战:从鼠标追踪到待办事项管理
前端·react.js
松涛和鸣1 小时前
DAY43 HTML Basics
linux·前端·网络·网络协议·tcp/ip·html
前端 贾公子1 小时前
剖析源码Vue项目结构 (一)
前端·javascript·vue.js
狂龙骄子1 小时前
jQuery表单验证插件全攻略
前端·javascript·jquery·jquery表单验证
十铭忘1 小时前
Vue3实现Pixso中的钢笔工具
开发语言·javascript·vue
forestsea1 小时前
从 XMLHttpRequest 到 Fetch API:现代前端网络请求的演进与迁移指南
前端·网络
XiaoYu20021 小时前
第4章 Nest.js业务合并
前端
局i2 小时前
【无标题】
前端·javascript·vue.js
前端小L2 小时前
双指针专题(四):像毛毛虫一样伸缩——「长度最小的子数组」
javascript·算法·双指针与滑动窗口