当前位置: 首页 > article >正文

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

<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中
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();
};

效果


http://www.kler.cn/a/106598.html

相关文章:

  • 【数据库系列】 Spring Boot 集成 Neo4j 的详细介绍
  • 系统架构师考试18天极限备考复盘(2024年11月)
  • 五、函数封装及调用、参数及返回值、作用域、匿名函数、立即执行函数
  • 恒流数显驱动数显LED驱动芯片VK16D32
  • Ubuntu 18 EDK2 环境编译
  • HarmonyOS ArkTs 解决流式传输编码问题
  • 简述一下伪共享的概念以及如何避免
  • 记录:获取windows当前登录的用户信息
  • R语言的物种气候生态位动态量化与分布特征模拟实践技术
  • P1868 饥饿的奶牛
  • 2023深耕kotlin,谈谈前景
  • webgl速记之如何根据用户硬件进行性能模式OR质量模式的切换的设计思路
  • Jetpack:019-Jetpack的导航二(传递数据)
  • 基于大数据的时间序列股价预测分析与可视化 - lstm 计算机竞赛
  • 如何做好建筑翻译呢
  • C++——C++入门(二)
  • 读书笔记:c++对话系列,模板方法模式(Template Method Pattern)
  • #力扣:2315. 统计星号@FDDLC
  • 电大搜题:开启智慧学习新时代
  • 2023年第四届MathorCup大数据竞赛(A题)|坑洼道路检测和识别|数学建模完整代码+建模过程全解全析
  • 软件工程——期末复习知识点汇总
  • python+request接口自动化框架
  • Transformer模型 | 用于目标检测的视觉Transformers训练策略
  • 多测师肖sir_高级金牌讲师__接口测试之tonken (5.6)
  • 异步编程详解(.NET)
  • java毕业设计基于springboot的民宿预订信息网站