vue3+qiankun如何使用loadMicroApp手动挂载实现页面缓存
问题描述
vue3+qiankun使用loadMicroApp手动挂载实现页面缓存，这个问题困扰我半年了，完全不知道如何下手，求大佬帮忙回答一下完整的手动挂载方法。。。感谢感谢
网上找了很多办法，没有找到，案例太少！官网的是react示例，用不了
现在主应用已经实现缓存，但是子应用没办法缓存！自己这边有很多个子应用，无法实现子应用缓存！
回答：
注释：这个可以实现多子应缓存
<template>
<div id="ifsSonList"></div><div id="PisSonList"></div>
<div id="TmsSonList"></div>
</template>
<script >
import {
onMounted,reactive,
toRefs,
onUnmounted,
onBeforeUnmount,
onUpdated,
watch
} from "vue";
import { start, loadMicroApp } from "qiankun";
import store from "@/store";
import { GetDicts } from "@/api/oa/portal/auth/sys/dict.js";
import { getToken } from "@/utils/auth";
import { fns } from "@/utils/RefreshToken.js";
import { getEmployees } from "@/api/common/common.js";
import { useRouter } from "vue-router";
export default {
setup() { const state = reactive({
microApp_ifs: null,
microApp_pis: null,
microApp_tms: null,
data: [],
ifs: 0,
pis: 0
});
const route = useRouter();
watch(() => route.currentRoute.value.path, (count, prevCount) => {
if (count.indexOf('/ifs/eam') != -1) {
state.microApp_ifs = loadMicroApp({
name: "/ifs/eam",
// entry: 'http://localhost:8003',
// entry: 'http://172.20.128.25:9800',
entry: "/ifseamweb/",
container: "#ifsSonList",
activeRule: `/ifs/eam`,
props: {
msg: {
data: {
userInfo: store,
Token: getToken(),
tenant_id: localStorage.getItem("tenant_id"),
lang: localStorage.getItem("lang"),
// storageRouter:store.getters.storageRouter
},
},
fn: {
getDict(dict_type) {
return GetDicts(dict_type);
},
getToken() {
return getToken();
},
getEmployees(data) {
return getEmployees(data);
},
show() {
return fns();
},
},
},
});
} else if (count.indexOf('/ehr/pis') != -1) {
state.microApp_pis = loadMicroApp({
name: "/ehr/pis",
// entry: 'http://localhost:8004',
// entry: 'http://172.20.128.25:9620',
entry: "/ehrpisweb/",
container: "#PisSonList",
activeRule: `/ehr/pis`,
props: {
msg: {
data: {
userInfo: store,
Token: getToken(),
tenant_id: localStorage.getItem("tenant_id"),
lang: localStorage.getItem("lang"),
},
},
fn: {
getDict(dict_type) {
return GetDicts(dict_type);
},
getToken() {
return getToken();
},
getEmployees(data) {
return getEmployees(data);
},
show() {
return fns();
},
},
},
});
console.log('pis');
} else if (count.indexOf('/ehr/tms') != -1) {
state.microApp_tms = loadMicroApp({
name: "/ehr/tms",
// entry: 'http://localhost:8005',
// entry: 'http://172.20.128.25:9610',
entry: "/ehrtmsweb/",
container: "#TmsSonList",
activeRule: "/ehr/tms",
props: {
msg: {
data: {
userInfo: store,
Token: getToken(),
tenant_id: localStorage.getItem("tenant_id"),
lang: localStorage.getItem("lang"),
// storageRouter:store.getters.storageRouter
},
},
fn: {
getDict(dict_type) {
return GetDicts(dict_type);
},
getToken() {
return getToken();
},
getEmployees(data) {
return getEmployees(data);
},
show() {
return fns();
}
}
}
})
}
}, { immediate: true })
const routeUrl = (count1) => {
}
onMounted(() => {
let routeUrl = route.currentRoute.value.path
if (routeUrl.indexOf('/ifs/eam') != -1) {
state.microApp_ifs = loadMicroApp({
name: "/ifs/eam",
// entry: 'http://localhost:8003',
// entry: 'http://172.20.128.25:9800',
entry: "/ifseamweb/",
container: "#ifsSonList",
activeRule: `/ifs/eam`,
props: {
msg: {
data: {
userInfo: store,
Token: getToken(),
tenant_id: localStorage.getItem("tenant_id"),
lang: localStorage.getItem("lang"),
// storageRouter:store.getters.storageRouter
},
},
fn: {
getDict(dict_type) {
return GetDicts(dict_type);
},
getToken() {
return getToken();
},
getEmployees(data) {
return getEmployees(data);
},
show() {
return fns();
},
},
},
});
} else if (routeUrl.indexOf('/ehr/pis') != -1) {
state.microApp_pis = loadMicroApp({
name: "/ehr/pis",
// entry: 'http://localhost:8004',
// entry: 'http://172.20.128.25:9620',
entry: "/ehrpisweb/",
container: "#PisSonList",
activeRule: `/ehr/pis`,
props: {
msg: {
data: {
userInfo: store,
Token: getToken(),
tenant_id: localStorage.getItem("tenant_id"),
lang: localStorage.getItem("lang"),
},
},
fn: {
getDict(dict_type) {
return GetDicts(dict_type);
},
getToken() {
return getToken();
},
getEmployees(data) {
return getEmployees(data);
},
show() {
return fns();
},
},
},
});
// console.log('pis');
} else if (routeUrl.indexOf('/ehr/tms') != -1) {
state.microApp_tms = loadMicroApp({
name: "/ehr/tms",
// entry: 'http://localhost:8005',
// entry: 'http://172.20.128.25:9610',
entry: "/ehrtmsweb/",
container: "#TmsSonList",
activeRule: "/ehr/tms",
props: {
msg: {
data: {
userInfo: store,
Token: getToken(),
tenant_id: localStorage.getItem("tenant_id"),
lang: localStorage.getItem("lang"),
// storageRouter:store.getters.storageRouter
},
},
fn: {
getDict(dict_type) {
return GetDicts(dict_type);
},
getToken() {
return getToken();
},
getEmployees(data) {
return getEmployees(data);
},
show() {
return fns();
}
}
}
})
}
})
onBeforeUnmount(() => {
state.microApp_pis.onUnmounted();
state.microApp_tms.onUnmounted();
state.microApp_ifs.onUnmounted();
})
return {
routeUrl
}
}
};
</script>
回答：
你好，方便请教一下，您这个方案可以实现应用间切换缓存吗
以上是 vue3+qiankun如何使用loadMicroApp手动挂载实现页面缓存 的全部内容， 来源链接： utcz.com/p/937538.html
