前端qiankun如何实现微应用路由跳转
五秒法则 2024-07-13 08:03:01 阅读 55
appContext：qiankun 沙箱的上下文对象，包含了子应用的信息和一些常用的方法和属性
config：子应用的配置对象
globalProperties：子应用的全局属性对象，它可以被子应用中的所有组件和模块访问
$mainRouter：这是父应用的路由实例，它可以通过 globalProperties 访问
push:'/tms-order/complaint/complaintList'：使用父应用的路由实例跳转到子应用中的 /tms-order/complaint/complaintList 路径
query:{data}：父应用通过路由跳转传递data参数给子应用
1、传参跳转页面
<code><script lang="ts" setup>code>
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>code>
</template>
2、跳转的页面
<script lang="ts" setup>code>
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>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。