4pc/src/App.vue

<template>
  <Locale>
    <RouterView v-slot="{ Component }">
      <!-- <KeepAlive> -->
      <component :is="Component" />
      <!-- </KeepAlive> -->
    </RouterView>

    <div id="dialog"></div>
  </Locale>
</template>

<script lang="ts" setup>
import Locale from "@/config/locale.vue";
import { ElLoading } from "element-plus";
import { lifeHook } from "./request/state";

let loading: ReturnType<typeof ElLoading.service> | null = null;
let timeout: ReturnType<typeof setTimeout>;
let exixts = false;

lifeHook.push({
  start: () => {
    clearTimeout(timeout);
    if (!exixts) {
      // service可能会再次引起life所以需要额外变量提前占位
      exixts = true;
      loading = ElLoading.service({
        lock: true,
        fullscreen: true,
        text: "加载中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    }
  },
  end: () => {
    if (exixts) {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        console.log("close");
        loading!.close();
        loading = null;
        exixts = false;
      }, 16);
    }
  },
});
</script>