vue关于页面刷新的几个方式

article/2025/10/8 15:20:06

在写项目的时候会遇到需要刷新页面重新获取数据,浅浅总结了一下几种方案。

1.this.$router.go(0)

        强制刷新页面,会出现一瞬间的白屏,用户体验感不好。

2.location.reload()

        也是强制刷新页面,和第一种方法一样,会造成一瞬间的白屏,用户体验感不好。

3.跳转空白页再跳回原页面

        在需要页面刷新的地方写上:this.$router.push('/emptyPage'),跳转到一个空白页。在emptyPage.vue里beforeRouteEnter 钩子里控制页面跳转,从而达到刷新的效果

beforeRouteEnter (to, from, next) {next(vm => {vm.$router.replace(from.path)})
}。

这种画面虽不会一闪,但是能看见路径快速变化。

4.控制<router-view>的显示隐藏

        在开发过程中最常用的还是这种方法。

        默认<router-view v-if="isRouterAlive" />isRouterAlive肯定是true,在需要刷新的时候把这个值设为false,接着再重新设为true。

   reload() {this.isRouterAlive = false; //先关闭,this.$nextTick(function () {this.isRouterAlive = true; //再打开});},

 例如:

在需要刷新的页面中注入依赖:inject: ['reload']

 在需要刷新的地方调用:this.reload()

        然后就可以实现页面的刷新功能了。这种可以实现页面刷新但是不会造成白屏和路由跳转, 是开发过程中用户体验感较好的一种。


http://chatgpt.dhexx.cn/article/XpC2QbeI.shtml

相关文章

HTML页面刷新及其应用例子

HTML页面刷新及其应用例子 刷新一般指重新载入当前页面。本文先给出html页面刷新重载方法汇总&#xff0c;再给出示例。 html页面刷新重载方法汇总 一、javascript页面刷新重载的方法&#xff1a; <a href"javascript:location.reload();">点击重新载入页面…

vue页面刷新

vue页面刷新 首先我们都知道vue属于单页面应用&#xff0c;默认境况下是不会触发刷新页面操作的&#xff0c;所以这个时候就需要我们通过事件来触发reload()来达到刷新操作 接下来我就为大家介绍三种刷新页面的方法 1. wiindow.location.reload([bForceGet])该方法强迫浏览…

hadoop 学习路线

Posted: Sep 6, 2013 Tags: Hadoophadoop familyroadmap Comments: 40 Comments Hadoop家族学习路线图 Hadoop家族系列文章&#xff0c;主要介绍Hadoop家族产品&#xff0c;常用的项目包括Hadoop, Hive, Pig, HBase, Sqoop, Mahout, Zookeeper, Avro, Ambari, Chukwa&am…

Hadoop 学习路线图

主要介绍Hadoop家族产品&#xff0c;常用的项目包括Hadoop, Hive, Pig, HBase, Sqoop, Mahout, Zookeeper, Avro, Ambari, Chukwa&#xff0c;新增加的项目包括&#xff0c;YARN, Hcatalog, Oozie, Cassandra, Hama, Whirr, Flume, Bigtop, Crunch, Hue等。 从2011年开始&…

Hadoop学习路线

Hadoop基础 Hadoop是一个能够对大量数据进行分布式处理的软件框架&#xff0c;它是一种技术的实现&#xff0c;是云计算技术中重要的组成部分&#xff0c;云计算的概念更广泛且偏向业务而不是必须拘泥于某项具体技术&#xff0c;云计算的存在只是一种新的商业计算模型和服务模…

第11期:Hadoop零基础学习路线

大家好&#xff0c;我是你们的老朋友老王随聊&#xff0c;今天和大家讨论的话题——Hadoop零基础应该怎么学&#xff1f; 通过这段时间和群里同学们交流&#xff0c;发现很多大学生甚至职场小白对Hadoop学习路线不是很清晰&#xff0c;所以我花了一些时间给大家整理了一张Hadoo…

hadoop学习路线图

Hadoop是一个由Apache基金会所开发的分布式系统基础架构。用户可以在不了解分布式底层细节的情况下&#xff0c;开发分布式程序。充分利用集群的威力进行高速运算和存储。而对于hadoop的学习是大数据学习中的重要一个环节&#xff0c;于是乎有很多人想要知道hadoop学习路线图。…

Python的基础编程

1. python的基本语法 Python是一个结合了解释性、编译性、互动性和面向对象的高级程序设计语言&#xff0c;结构简单&#xff0c;语法定义清晰&#xff1b; Python最具特色的就是使用缩进来表示代码块&#xff0c;不需要使用大括号{}&#xff0c;但每一个模块内的语句必须包含…

【Java编程指南】语法基础

目录 一、前言 二、关键字 三、数据类型 1.存储单元 2.存储范围 3.类型转换 四、常量 五、变量 六、标识符 七、注释 一、前言 学习目标 1&#xff1a;熟悉Java的关键字、数据类型&#xff08;包括范围&#xff09;、常量与变量的区别 学习目标 2&#xff1a;类型转…

新手小白零基础,该怎样学习编程呢?

零基础编程入门先学什么&#xff1f;编程语言有几百种&#xff0c;我们应该怎么选择。想学习编程&#xff0c;加入互联网行业&#xff0c;哪一个更有前途&#xff1f;在小白学习编程会有各种各样的问题&#xff0c;今天小编我就来为你解答。 一、怎么选择编程语言 编程语言有很…

如何打好编程基础

如何打好编程基础 这篇文章是写给那些真心想学编程的人看的——那些憋着一股狠劲儿,一定要做出个什么真东西,不学好不罢休的人;而不是那些「听说编程好玩」的人,在我看来,这种人永远都入不了编程的门,更别提做出个像样的东西来了。 心态调整 确定目标 在你学习编程之前思…

Web编程基础知识

前段时间零零碎碎看了Web编程相关内容&#xff0c;今天就整理了一下 Web编程&#xff0c;前端主要是htmlCSSJavaScript&#xff0c;后端使用最多的是PHPMySQL 此次教程主要是关于html、CSS、JavaScript和PHP的一些语法和使用细则 1 Html: HyperText Markup Language&#xff0c…

如何0基础学编程,岗位怎么选择?

下面进入正题&#xff0c;如果非计算机专业的话短期内想找到工作可以考虑去选择找IT培训机构学习。一方面有专业老师指导&#xff0c;比自己看书、看视频学习更有效率。如果自学主要你非计算机专业&#xff0c;计算机基础编程基础相当于没有&#xff0c;有些编程理论很难理解&a…

5.Java编程基础

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是W_chuanqi&#xff0c;一个编程爱好者 &#x1f4d9; 个人主页&#xff1a;W_chaunqi &#x1f600; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f4ac; 愿你我共…

新手小白入门编程第1讲 计算机基础知识 JAVA基础知识

1 计算机基础知识 1.1计算机 计算机&#xff08;Computer&#xff09;全称&#xff1a;电子计算机&#xff0c;俗称电脑。是一种能够按照程序运行&#xff0c;自动、高速处理数据的现代化智能电子设备。常见的形式有台式计算机、笔记本计算机。按照规模分为微型机、小型机、大…

linux软件包安装与卸载

7.1 安装软件包的三种方法 在Linux下安装软件包&#xff0c;主要有3种办法 &#xff08;1&#xff09;rpm工具&#xff08;手动安装&#xff0c;难点在于包的依赖关系&#xff09; &#xff08;2&#xff09;yum工具&#xff08;python开发出来的工具&#xff0c;操作对象rp…

linux下如何卸载系统软件,教你在Linux下如何卸载软件

软件的卸载 1.软件的卸载主要是使用rpm来进行的。卸载软件首先要知道软件包在系统中注册的名称。键入命令&#xff1a; #rpm -q -a 即可查询到当前系统中安装的所有的软件包。 2.确定了要卸载的软件的名称&#xff0c;就可以开始实际卸载该软件了。键入如下命令即可卸载软件&am…

Linux 软件安装与卸载

软件安装与卸载 软件安装与卸载概述 在Ubuntu中安装软件和Windows系统中双击exe文件安装软件的方式有很大的不同&#xff0c;在Ubuntu中主要分为以下两种种软件安装的方式: - 通过apt-get包管理器从软件源中安装(图形化和终端命令两种方式) -通过deb格式的软件包安装我们使用…

uniapp+h5混合开发

为了减少app频繁上架&#xff0c;频繁更新&#xff0c;决定放弃纯uniapp开发&#xff0c;改用uniapp(后续简称uni)h5的方式进行混合开发。 技术选型&#xff1a; 整个app架子用uni&#xff08;vue3&#xff09;&#xff0c;h5采用vue3vant4&#xff0c;然后使用uni的webview进行…

H5 混合开发(更新中)

1 流行的混合开发方案 基于 WebView UI &#xff08;JSBridge&#xff09; 基于 Native UI&#xff08;ReactNative、weex&#xff09; 小程序方案&#xff08;微信、支付宝小程序&#xff09; JS通过JSBridge来调用native api&#xff0c;如拍照/扫一扫 2 H5和原生互相调用…