【qiankun】子应用的路由信息传给主应用，主应用使用this.$router.push跳转子应用页面

最新推荐文章于 2025-04-14 15:12:36 发布

湛海不过深蓝

最新推荐文章于 2025-04-14 15:12:36 发布

阅读量2k

点赞数

分类专栏： qiankun 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/bbt953/article/details/131831187

版权

qiankun 专栏收录该内容

2 篇文章

订阅专栏

文章描述了在使用qiankun微前端框架时，遇到的主应用（基于Vue2）与子应用（基于Vue3）之间的路由交互问题。子应用通过自定义事件传递路由信息，主应用监听并接收。在尝试用name属性进行路由跳转时遇到问题，因为警告提示name不存在。为了解决参数传递且不显示在URL，作者采用了window.history.pushState方法，并在子应用端获取存储的state来获取参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提：已经安装qiankun，并且子应用已经接入主应用

场景：主应用是vue2，子应用是vue3

子应用的路由文件router/index.ts

// 在这段后面加下列代码
const router = createRouter({
  history: createWebHistory(
    (window as any).__POWERED_BY_QIANKUN__
      ? "/mainapp/platform"
      : "/platform"
  ),
  routes,
});

// 子应用中触发自定义事件，并传递路由信息
window.dispatchEvent(new CustomEvent('routeChange', 
	{ 
		detail: router.options.routes 
	}
));

主应用的main.js文件中接收

new Vue({
	router,
	store,
	render: h => h(App),
	// 主要是这段代码
	mounted() {
		window.addEventListener('routeChange', (event) => {
			const routeInfo = event.detail;
			console.log(routeInfo.value, 'routeInfo')
		});
	}
}).$mount('#app')

主应用使用this.$router.push跳转子应用页面，在任何一个你需要跳转的vue页面里面使用就行

this.$router.push("子应用路径")
this.$router.push({path: "子应用路径", query: {传参}})

但是有个很抓狂的事情，name跳转死都不给跳，一直报警告说name不存在，但是我确定name一定存在，但是我要传参，并且这个参数不能显示在地址栏，所以只能放弃router.push

const state = { id: item.info.id };
const url = '/paasportal/api-service-platform/home/apiDetail';
window.history.pushState(state, '', url);
window.location.href = url;

子应用接收window.history.pushState的传值

const state = window.history.state;
const id = state ? state.id : null;
console.log(id, '==============')