vue3刷新页面体验感最好的方法（无白屏）

利用provide和inject实现刷新页面
一、App.vue

1.定义isRouterActive变量

<template>
  <el-config-provider size="default" :z-index="3000" :locale="(zh as any)">
    <RouterView v-if="isRouterActive" />
  </el-config-provider>
</template>

<script setup lang="ts">
import zh from 'element-plus/dist/locale/zh-cn.js'
import { provide, nextTick, ref } from 'vue'

const isRouterActive = ref(true)

provide('reload', () => {
  isRouterActive.value = false
  nextTick(() => {
    isRouterActive.value = true
  })
})

</script>

2.使用

import {  inject } from 'vue'

const reload: any = inject('reload')

const onRevocation = async () => {
  await commonStore.revokeLeave({
    flowId: get(detail.value, `['studentleaveissue.studentLeaveFlow'].id`),
  })
  notify('撤回请假成功')
  await wyGo(`/student`)
  reload()
}