vue3+qiankun如何使用loadMicroApp手动挂载实现页面缓存

Question

问题描述

vue3+qiankun使用loadMicroApp手动挂载实现页面缓存，这个问题困扰我半年了，完全不知道如何下手，求大佬帮忙回答一下完整的手动挂载方法。。。感谢感谢

网上找了很多办法，没有找到，案例太少！官网的是react示例，用不了

现在主应用已经实现缓存，但是子应用没办法缓存！自己这边有很多个子应用，无法实现子应用缓存！

Answer 1

注释：这个可以实现多子应缓存
<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>

Answer 2

你好，方便请教一下，您这个方案可以实现应用间切换缓存吗