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

news2024/11/19 3:31:32
<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.coloradmin.cn/o/1124683.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

法国橡木与美国橡木:酒桶如何影响葡萄酒?

木材赋予葡萄酒神奇的质地、香气和味道&#xff0c;这是其他任何方式都无法实现的。大多数世界上最好的葡萄酒都是在桶中陈酿的&#xff0c;法国和美国的橡木是最常用的木材&#xff0c;还有来自匈牙利、罗马尼亚和高加索山脉的橡木&#xff0c;其他木材&#xff0c;如金合欢&a…

【JavaEE】TCP数据报套接字编程

一、TCP数据报套接字编程 1.1 ServerSocket API ServerSocket 是创建TCP服务端Socket的API ServerSocket 构造方法&#xff1a; ServerSocket 方法&#xff1a; 1.2 Socket API Socket 是客户端Socket&#xff0c;或服务端中接收到客户端建立连接&#xff08;accept方法&…

jira 实现search 查询

举一个简单的例子&#xff1b; 一个 bug 包含 leader, 9月13号解决。找到这条记录。 模糊查询 summary ~ "leader"比较大小 created < "2023/09/13"排序 ORDER BY created DESC参考&#xff1a; https://confluence.atlassian.com/jira063/advanced…

C++项目——云备份-②-第三方库认识

文章目录 专栏导读1. json 认识1.1 JSON 数据结构的特点 2. jsoncpp库认识3. json实现序列化案例4. json实现反序列化案例5. bundle文件压缩库认识6. bundle库实现文件压缩案例7.bundle库实现文件解压缩案例8.httplib库认识9. httplib库搭建简单服务器案例10. httplib库搭建简单…

python实现excel的数据提取

一文带你实现excel表格的数据提取 今天记录一下如何使用python提取Excel中符合特定条件的数据 在数据处理和分析的过程中&#xff0c;我们经常需要从Excel表格中提取特定条件下的数据。Python的pandas库为我们提供了方便的方法来进行数据查询和过滤。 Pandas 是 Python 语言…

代码随想录 Day26 贪心 01 全集 LeetCode455 分发饼干 LeetCodeT346摆动序列 LeetCdoe T53 最大子数组和

前言:贪心无套路 本质: 局部最优去推导全局最优 两个极端 贪心算法的难度一般要么特别简单,要么特别困难,所以我们只能多见识多做题,记住无需数学证明,因为两道贪心基本上毫无关系,我们只需要去思考局部最优即可 贪心的小例子 比如有一堆钞票&#xff0c;你可以拿走十张&#x…

vue 生命周期钩子函数 mounted()实例

在挂载后操作dom获取焦点。 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"w…

Maven3.9.2 bug IDEA指定配置文件不生效

Maven3.9.2 bug IDEA指定配置文件不生效 描述 运行新项目需要配置指定的settings.xml文件&#xff0c;一直报错找不到依赖&#xff0c;查看maven日志是从maven中心仓库找的依赖&#xff0c;自然找不到。 解决过程 清理idea缓存&#xff0c;仍然报错 删除/${username}/.m2/…

三分钟实现MQTT协议网关网口连接西门子SMART200PLC上传阿里云服务器

MQTT协议网关网口连接西门子SMART200PLC操作说明v1.4 目录 一. 使用流程 二. 准备工作 2.1 需要准备如下物品 2.2 LF220网关准备工作 2.3 PLC准备工作 2.4 电脑的准备工作 2.5 MQTT服务器准备工作 三. 阿里云IoT平台配置步骤 3.1 创建产品 3.2 添加设备 …

取证之查看本机保存的WiFi密码

一、电脑保存有WiFi密码&#xff0c;且正常连接该WiFi 1、打开网络适配器高级选项 2、双击无线网卡&#xff0c;选择无线属性 3、点击安全&#xff0c;显示字符&#xff0c;即可看到WiFi密码。 二、电脑保存有密码&#xff0c;但是没有链接WiFi。 1、查看wlan接口上的配置文件…

蓝桥杯每日一题0223.10.23

第几天 - 蓝桥云课 (lanqiao.cn) 题目描述 题目分析 简单枚举&#xff08;用k来记录经过的天数&#xff09; #include<bits/stdc.h> using namespace std; bool is_ren(int n) {if(n % 400 0 || (n % 4 0 && n % 100 ! 0))return true;return false; } int …

推荐微软的开源课程《AI-For-Beginners》

今天给大家推荐一个对新手非常友好的AI入门课程《AI-For-Beginners》。 该课程由微软推出&#xff0c;为期12周&#xff0c;共24课时&#xff0c;对比Google的AI入门课更通俗易懂一些&#xff0c;强烈推荐刚入门的AI小白们学习&#xff01;而且是免费&#xff01;课程资源看文…

Matlab论文插图绘制模板第122期—函数折线图(fplot)

本期分享的是函数折线图的绘制模板。​ 所谓函数折线图&#xff0c;就是将自定义线函数进行可视化表达​。 先来看一下成品效果&#xff1a; 特别提示&#xff1a;本期内容『数据代码』已上传资源群中&#xff0c;加群的朋友请自行下载。有需要的朋友可以关注同名公号【阿昆的…

基于springboot基于会员制医疗预约服务管理系统项目【项目源码+论文说明】

基于springboot实现会员制医疗预约服务信息系统演示 摘要 会员制医疗预约服务管理信息系统是针对会员制医疗预约服务管理方面必不可少的一个部分。在会员制医疗预约服务管理的整个过程中&#xff0c;会员制医疗预约服务管理系统担负着最重要的角色。为满足如今日益复杂的管理需…

Java Spring 通过 AOP 实现方法参数的重新赋值、修改方法参数的取值

AOP 依赖 我创建的项目项目为 SpringBoot 项目 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.1.3</version></parent><dependency><groupId…

Linux:【Kafka-Java一】Spring实现kafka消息的简单发送

目录 一、创建maven项目 二、引入依赖 三、创建生产者 一、创建maven项目 1.1、创建maven项目不再多说 二、引入依赖 1.1、maven项目创建完成后&#xff0c;需要引入以下依赖 // kafka 依赖<dependency><groupId>org.apache.kafka</groupId><artifact…

GRE MGRE原理与配置

IPSec VPN用于在两个端点之间提供安全的IP通信&#xff0c;但只能加密并传播单播数据无法加密和传输语音、视频、动态路由协议信息等组播数据流量。通用路由封装协议GRE( Generic Routing Encapsulation )提供了将一种协议的报文封装在另一种协议报文中的机制&#xff0c;是一种…

华为云全新上线Serverless应用中心,支持一键构建文生图应用

近日&#xff0c;华为云全新上线Serverless应用中心&#xff0c;提供了大量应用模板&#xff0c;让用户能够一键部署函数和周边依赖资源&#xff0c;节省部署时间&#xff0c;快速上手将应用部署到华为云函数计算FunctionGraph&#xff0c;并一键开通周边依赖资源。 本次Serve…

微信小程序ios页面没有滚动下拉也会出现黑色背景

问题截图&#xff1a; 查了一下资料说有用一下方法解决的&#xff1a; 整体overflow: hidden&#xff0c;页面的内容将无法滚动&#xff08;试了一下没用&#xff09;&#xff1b;设置 -webkit-overflow-scrolling 和 touch-action 样式属性来禁用页面的拖动和拉拽操作&…

底层驱动day4作业

分布注册设备&#xff0c;实现文件和设备的绑定 代码&#xff1a; //head.h #ifndef __HEAD_H__ #define __HEAD_H__ #define PHY_RCC 0x50000A28 #define PHY_GPIOE_MODER 0x50006000 #define PHY_GPIOF_MODER 0x50007000 #define PHY_GPIOE_ODR 0x50006014 #define PHY_GPI…