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

泰妃

已于 2023-12-14 17:08:58 修改

阅读量2.2k

点赞数 9

文章标签： javascript 前端 vue.js

于 2023-11-27 14:39:41 首次发布

本文链接：https://blog.csdn.net/weixin_75014991/article/details/134644810

版权

本文介绍了如何在Vue应用中使用`provide`和`inject`功能实现页面刷新，通过`isRouterActive`变量控制`RouterView`的显示，并在特定操作后调用`reload`方法刷新页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用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()
}