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': {},
				}
			})
	]
})
相关推荐
乖女子@@@2 小时前
01ReactNative-环境搭建
javascript·react native·react.js
开发者小天2 小时前
react中的使用useReducer和Context实现todolist
前端·javascript·react.js
Youyzq2 小时前
react-inlinesvg如何动态的修改颜色SVG
前端·react.js·前端框架
wniuniu_2 小时前
rbd创建特定的用户
前端·chrome
老前端的功夫2 小时前
Webpack打包机制与Babel转译原理深度解析
前端·javascript·vue.js·webpack·架构·前端框架·node.js
初遇你时动了情2 小时前
管理系统权限管理(菜单、页面、按钮)react+redux/vue3 pinia实现方式
前端·react.js·前端框架
一只爱吃糖的小羊2 小时前
React 避坑指南:让电脑卡死的“无限循环“
前端·react.js
by__csdn2 小时前
javascript 性能优化实战:垃圾回收优化
java·开发语言·javascript·jvm·vue.js·性能优化·typescript
IT_陈寒2 小时前
Java 21新特性实战:5个杀手级功能让你的代码效率提升50%
前端·人工智能·后端