前端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>

原文地址：https://blog.csdn.net/qq_51478745/article/details/137524009

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！