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

前提：已经安装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, '==============')