前端qiankun如何实现微应用路由跳转

appContext：qiankun 沙箱的上下文对象，包含了子应用的信息和一些常用的方法和属性
config：子应用的配置对象
globalProperties：子应用的全局属性对象，它可以被子应用中的所有组件和模块访问
$mainRouter：这是父应用的路由实例，它可以通过 globalProperties 访问
push:'/tms-order/complaint/complaintList'：使用父应用的路由实例跳转到子应用中的 /tms-order/complaint/complaintList 路径
query:{data}：父应用通过路由跳转传递data参数给子应用

1、传参跳转页面

<script lang="ts" setup>
import { getCurrentInstance,ComponentInternalInstance  } from 'vue';
const { appContext } = getCurrentInstance() as ComponentInternalInstance;
function toOrder(){
  const data = JSON.stringify({
    name:'JohnDoe',
    age:30
  })
  appContext.config.globalProperties.$mainRouter.push({
    path:'/tms-order/complaint/complaintList',
    query:{
      data
    }
  })
}
</script>
<template>
  <el-button @click="toOrder">跳转至order模块</el-button>
</template>

2、跳转的页面

<script lang="ts" setup>
import { useRoute } from 'vue-router';
const route = useRoute();
onMounted(()=>{
    const dataString:any = route.query.data
    const data = JSON.parse(dataString);
    console.log('datadatadata',data);
})
</script>