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.dataconst data = JSON.parse(dataString);console.log('datadatadata',data);
})
</script>