vue3中刷新当前页面的三种方法

℘团子এ

已于 2025-04-24 11:05:00 修改

阅读量1.7w

点赞数 11

分类专栏： vue3 文章标签：前端 javascript html

于 2023-10-23 18:16:59 首次发布

本文链接：https://blog.csdn.net/2202_75509848/article/details/133995710

版权

vue3 专栏收录该内容

57 篇文章

订阅专栏

文章介绍了三种处理页面刷新以避免闪白的方法：1)使用`location.reload()`和`history.go(0)`会导致页面闪白；2)通过Vue的`provide`和`inject`实现组件间通信，控制刷新过程，有效解决了闪白问题。

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

<div @click="kannoFn">kanno</div>

1.location.reload()，缺点：刷新时会页面闪白

function kannoFn(){
  location.reload()
}

2.history.go(0)，缺点：刷新时会页面闪白

function kannoFn(){
  history.go(0)
}

效果

3.通过组件通信方式，不会出现闪白

在App.vue中

// 在App.vue中
<template>
  <router-view v-if="isRouterActive" />
</template>


import { provide,nextTick } from 'vue'
const isRouterActive = ref(true)
provide('reload', () => {
  isRouterActive.value = false
  nextTick(() => {
    isRouterActive.value = true
  })
})

在需要刷新的页面中

<div class="circle" @click="updateFun">刷新</div>

import { inject } from 'vue';

const reload = inject("reload");
const updateFun = () => {
  reload();
};

效果