刷新页面

Vue刷新页面的三种方式

万次阅读 多人点赞 2019-06-08 10:54:18

我们在写项目的时候，经常会遇到，用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。如：用户登录成功、增加、删除、更新等。原始方法： location.reload(); vue自带的路由跳转： ...

我们在写项目的时候，经常会遇到，用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。如：用户登录成功、增加、删除、更新等。

原始方法：

location.reload();


vue自带的路由跳转：

this.$router.go(0);

用过的人都知道，前两者都是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。

所以，我们选择第三种方式：

3. 首先在App里面写下如下代码：
<template>
    <div id="app">
    	<router-view v-if="isRouterAlive"></router-view>
	</div>
</template>
<script>
    export default {
        name: 'App',
        provide () {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。                                             
            return {
                reload: this.reload                                              
            }
        },
        data() {
            return{
                isRouterAlive: true                    //控制视图是否显示的变量
            }
        },
        methods: {
            reload () {
                this.isRouterAlive = false;            //先关闭，
                this.$nextTick(function () {
                    this.isRouterAlive = true;         //再打开
                }) 
            }
        }，
    }
</script>

接下来，我们就可以在需要刷新页面的组件里这样写：
export default {
    inject:['reload'],                                 //注入App里的reload方法
    data () {
        return {
    	.......
        }
    },

在需要刷新页面的代码块中使用：
this.reload();

收起

展开全文

(精华)2020年7月13日微信小程序获取页面栈来刷新页面
收起
javascript

网站开发进阶(二十六)js刷新页面方法大全

万次阅读 2016-01-01 12:08:49

js刷新页面方法大全在项目开发过程中,需要实现刷新页面。经过学习，发现下面这条语句就可以轻松实现。 location.reload(); //刷新页面 有关刷新页面的其它方法，具体学习内容如下，有需要的朋友可以参考下。 ...

js刷新页面方法大全

      在项目开发过程中,需要实现刷新页面。经过学习，发现下面这条语句就可以轻松实现。

      location.reload(); // 刷新页面

      有关刷新页面的其它方法，具体学习内容如下，有需要的朋友可以参考下。

     本文介绍下，用js刷新当前页面的几种方法，包括reload方法、replace方法、自动刷新方法等。

      如何实现刷新当前页面呢？借助js你将无所不能。

1. reload 方法

该方法强迫浏览器刷新当前页面。

语法：location.reload([bForceGet])   

参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新")

2. replace 方法

该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。

语法： location.replace(URL)   

通常使用： location.reload() 或者是 history.go(0) 来做。

此方法类似客户端点F5刷新页面，所以页面method="post"时，会出现"网页过期"的提示。

因为Session的安全保护机制。

当调用 location.reload() 方法时， aspx页面此时在服务端内存里已经存在， 因此必定是 IsPostback 的。

如果有这种应用： 需要重新加载该页面，也就是说期望页面能够在服务端重新被创建，期望是 Not IsPostback 的。

这里，location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。

代码： location.replace(location.href);

返回并刷新页面：

location.replace(document.referrer);

document.referrer //前一个页面的URL

不要用 history.go(-1)，或 history.back();来返回并刷新页面，这两种方法不会刷新页面。

附：

Javascript刷新页面的几种方法：

代码如下:

history.go(0) 

location.reload() 

location=location 

location.assign(location) 

document.execCommand('Refresh') 

window.navigate(location) 

location.replace(location) 

document.URL=location.href

自动刷新页面的方法

1. 页面自动刷新

把如下代码加入<head>区域中

代码如下:

<meta http-equiv="refresh" content="20">

其中20指每隔20秒刷新一次页面.

2. 页面自动跳转

把如下代码加入<head>区域中

代码如下:

<meta http-equiv="refresh" content="20;url=http://www.jb51.net">

其中20指隔20秒后跳转到http://www.jb51.net页面

3. 页面自动刷新js版

代码如下:

 

<script language="JavaScript">
function myrefresh()
{
   window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>

 

4. JS刷新框架的脚本语句

代码如下:

//刷新包含该框架的页面用   

<script language=JavaScript>

   parent.location.reload();

</script>

//子窗口刷新父窗口

<script language=JavaScript>

    self.opener.location.reload();

</script>

(　或　<a href="javascript:opener.location.reload()">刷新</a>   )

//刷新另一个框架的页面用   

<script language=JavaScript>

   parent.另一FrameID.location.reload();

</script>

如果想关闭窗口时刷新或想开窗时刷新，在<body>中调用以下语句即可。

代码如下:

<body οnlοad="opener.location.reload()"> 开窗时刷新

<body onUnload="opener.location.reload()"> 关闭时刷新

<script language="javascript">

window.opener.document.location.reload()

</script>

一、先来看一个简单的例子： 

下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。 

frame.html 由上(top.html)下(bottom.html)两个页面组成，代码如下： 

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

<HTML> 

<HEAD> 

<TITLE> frame </TITLE> 

</HEAD> 

<frameset rows="50%,50%"> 

<frame name=top src="top.html"> 

<frame name=bottom src="bottom.html"> 

</frameset> 

</HTML> 

现在假设top.html (即上面的页面) 有七个button来实现对bottom.html (即下面的页面) 的刷新，可以用以下七种语句，哪个好用自己看着办了。 

top.html 页面的代码如下： 

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

<HTML> 

<HEAD> 

<TITLE> top.html </TITLE> 

</HEAD> 

<BODY> 

<input type=button value="刷新1" οnclick="window.parent.frames[1].location.reload()"><br> 

<input type=button value="刷新2" οnclick="window.parent.frames.bottom.location.reload()"><br> 

<input type=button value="刷新3" οnclick="window.parent.frames['bottom'].location.reload()"><br> 

<input type=button value="刷新4" οnclick="window.parent.frames.item(1).location.reload()"><br> 

<input type=button value="刷新5" οnclick="window.parent.frames.item('bottom').location.reload()"><br> 

<input type=button value="刷新6" οnclick="window.parent.bottom.location.reload()"><br> 

<input type=button value="刷新7" οnclick="window.parent['bottom'].location.reload()"><br> 

</BODY> 

</HTML> 

下面是bottom.html页面源代码，为了证明下方页面的确被刷新了，在装载完页面弹出一个对话框。 

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

<HTML> 

<HEAD> 

<TITLE> bottom.html </TITLE> 

</HEAD> 

<BODY οnlοad="alert('我被加载了！')"> 

<h1>This is the content in bottom.html.</h1> 

</BODY> 

</HTML> 

解释一下： 

代码如下:

1.window指代的是当前页面，例如对于此例它指的是top.html页面。 

2.parent指的是当前页面的父页面，也就是包含它的框架页面。例如对于此例它指的是framedemo.html。 

3.frames是window对象，是一个数组。代表着该框架内所有子页面。 

4.item是方法。返回数组里面的元素。 

5.如果子页面也是个框架页面，里面还是其它的子页面，那么上面的有些方法可能不行。 

附： 

Javascript刷新页面的几种方法： 

1 history.go(0) 

2 location.reload() 

3 location=location 

4 location.assign(location) 

5 document.execCommand('Refresh') 

6 window.navigate(location) 

7 location.replace(location) 

8 document.URL=location.href 

二、自动刷新页面 

1.页面自动刷新：把如下代码加入<head>区域中 

<meta http-equiv="refresh" content="20"> 

其中20指每隔20秒刷新一次页面. 

2.页面自动跳转：把如下代码加入<head>区域中 

<meta http-equiv="refresh" content="20;url=http://www.jb51.net"> 

其中20指隔20秒后跳转到http://www.jb51.net页面 

3.页面自动刷新js版 

  [注:如需引入外部Js需刷新才能执行]

三、java在写Servler,Action等程序时，要操作返回页面的话（如谈出了窗口，操作完成以后，关闭当前页面，刷新父页面） 

代码如下:

1 PrintWriter out = response.getWriter(); 

2 out.write("<script type=\"text/javascript\">"); 

3 子窗口刷新父窗口 

4 out.write("self.opener.location.reload();"); 

5 //关闭窗口 

6 out.write("window.opener=null;"); 

7 out.write("window.close();"); 

8 out.write("</script>"); 

四、JS刷新框架的脚本语句 

1.如何刷新包含该框架的页面用 

代码如下:

<script language=JavaScript> 

parent.location.reload(); 

</script> 

2.子窗口刷新父窗口 

复制代码 代码如下:

 

<script language=JavaScript> 

self.opener.location.reload(); 

</script> 

3.如何刷新另一个框架的页面用 （上面的实例以说明了） 

代码如下:

语句1. window.parent.frames[1].location.reload(); 

语句2. window.parent.frames.bottom.location.reload(); 

语句3. window.parent.frames["bottom"].location.reload(); 

语句4. window.parent.frames.item(1).location.reload(); 

语句5. window.parent.frames.item('bottom').location.reload(); 

语句6. window.parent.bottom.location.reload(); 

语句7. window.parent['bottom'].location.reload(); 

4.如果想关闭窗口时刷新或者想开窗时刷新的话，在<body>中调用以下语句即可。 

<body οnlοad="opener.location.reload()"> 

开窗时刷新 

<body onUnload="opener.location.reload()"> 

关闭时刷新 

代码如下:

<script language="javascript"> 

window.opener.document.location.reload() 

</script>

收起

展开全文

javascript

iframe刷新页面时不刷新父页面
2015-11-19 04:00:51
session过期之后刷新页面跳转到登陆页面的时候父页面不刷新,父页面里面包含登录的页面
收起
iframe session

刷新页面回到页面顶部

千次阅读 2017-10-24 15:57:01

这个事件是在用户关闭页面之前和刷新页面时触发：里面的两行代码为：刷新页面时就让网页从头显示。scrollTop有兼容性，请将兼容性写完整，保证各个浏览器之间的正常执行。 window.onbeforeunload = function

点击浏览器的刷新按钮刷新
    我们在做前端网站的时候往往会遇到用户点击刷新的行为，下面这个事件是JS为用户点击刷新按钮时触发的事件。
    这个事件是在用户关闭页面之前和刷新页面时触发：
    里面的两行代码为：刷新页面时就让网页从头显示。scrollTop有兼容性，请将兼容性写完整，保证各个浏览器之间的正常执行。
    window.onbeforeunload = function(){
            document.documentElement.scrollTop = 0;  //ie下
            document.body.scrollTop = 0;  //非ie
    }

收起

展开全文

vue跳转页面后刷新页面
千次阅读 2019-01-30 10:22:43
跳转页面使用router-link 刷新页面 在router-link页面中写方法refresh 新页面取参数
```
跳转页面

使用router-link



刷新页面

在router-link页面中写方法refresh



 

新页面取参数 
```
收起
展开全文
vue跳转页面
AngularJs 刷新页面
万次阅读 2017-01-17 15:51:46
AngularJs 刷新页面可采用下面的方式：首先先在控制器中注册$window，然后定义函数$scope.reloadRoute，在需要刷新页面的地方调用函数$scope.reloadRoute即可。 $scope.reloadRoute = function () { $window....
收起
浏览器刷新页面
万次阅读 2020-05-19 00:05:04
--每五秒刷新一次当前页面--> <meta http-equiv="refresh" content="5" />  <meta http-equiv="refresh" content="5;url=https://www.baidu.com/" /> 方法二： ...
收起
Android刷新页面
千次阅读 2017-12-12 14:31:00
Android刷新页面继承 extends Activity/*** 调用onCreate(), 目的是刷新数据,从另一activity界面返回到该activity界面时, 此方法自动调用*/ @Override public void onResume() { super.onResume(); o...
收起
uniapp跳转页面成功之后，刷新页面
万次阅读 2019-08-27 16:04:47
uni.switchTab({ url: '/pages/home/index', success(){ let page = getCurrentPages().pop(); //跳转页面成功之后 if (!page) return; page.onLoad(); //如果页面存在，则重新刷新页面 } }...
收起
a链接刷新页面与js刷新页面用法示例介绍
千次阅读 2018-03-02 11:47:16
刷新页面通常是使用a链接与js刷新，至于两者在使用中的区别，在接下来的文章中有详细的介绍，感兴趣的朋友可以了解下1.a链接的使用操作：[html] view plain copy<a href="javascript:history.go(-1);...
收起
jq 刷新页面，刷新父级页面，iframe刷新父级页面
千次阅读 2019-08-29 11:39:37
//刷新当前页面. parent.location.reload(); //刷新父亲对象（用于框架） opener.location.reload(); //刷新父窗口对象（用于单开窗口） top.location.reload(); //刷新最顶端对象（用于多开窗口） ...
收起
Vue 路由切换时页面刷新页面
千次阅读 2019-11-28 19:55:32
问题原因：在组件mounted钩子中调用的刷新页面内容，但测试发现这个钩子没有被调用。后来发现App.vue中使用了<keep-alive>： <template> <div id="app"> <keep-alive> <router-view...
收起
a链接刷新页面与js刷新页面用法示例介绍【HTML几种常用返回页面方法】
千次阅读 2016-08-03 10:39:01
刷新页面通常是使用a链接与js刷新，至于两者在使用中的区别，在接下来的文章中有详细的介绍，感兴趣的朋友可以了解下 1.a链接的使用操作：返回上一页刷新当前页 #top的效果在我这没起作用，我直接写的刷新当前...
收起
html
后端刷新和前端刷新页面的过程
千次阅读 2018-10-16 21:05:47
加粗样式对于服务器开发工程师来说，前段页面的刷新分：后端刷新和前端刷新后端刷新的实现是通过模板加数据的方式实现的 ...不管是后端刷新还是前端刷新 ...1 后端刷新页面的流程 1.1 实现服务器的API接口文档...
收起
小程序tabBar，返回tabBar不刷新页面，进入tabBar刷新页面
千次阅读 2018-09-30 22:33:00
2、场景如下图：报修进入下一步，返回第一步时不能刷新页面（即保留页面数据），从其他tabBar进入报修页面时就需要清空可能已经填写的数据。 3、解决办法，在第二步页面做了一个本地存储变量，在第一步的页面判断...
收起
h5实现刷新页面
千次阅读 2018-12-15 11:17:36
window.location.reload()，window.history.go(0)和...Javascript刷新页面的几种方法： 1 history.go(0) 除非有<%..%>等需在服务端解释才能生成的页面代码,否则直接读取缓存中的数据不刷新 2 ...
收起
解决-刷新页面Vuex数据丢失
千次阅读 2020-07-02 15:02:33
vue刷新页面vuex数据丢失 vuex数据丢失 vue刷新页面
收起
小程序里页面后退怎么刷新页面
千次阅读 2018-12-06 13:42:16
即后退刷新页面。刚开始以为是书写顺序，检查好几遍发现不是，根本原因是页面在返回之后没有刷新。那么怎么解决，查了好多资料。其实咱们小程序不存在页面刷新，只需要掌握好生命周期，那这个问题就OK了。比如...
收起
刷新页面和自动刷新页面
千次阅读 2006-06-22 10:00:00
刷新本页面：代码：刷新自动刷新页面：在HTML的与之间加入下面这段代码，则在5分钟之后正在浏览的页面将会自动变为target.html这一页。代码中300为刷新的延迟时间，以秒为单位。targer.html为你想转向的目标页,若为...
收起
javascript html url
vue页面刷新页面数据不在的问题
千次阅读 2019-05-28 18:04:13
vue页面刷新页面数据不在的问题 vue页面跳转通过parmas携带的参数在新页面里一刷新就会丢失， 1.使用sessionStorage保存页面要用到的数据无论页面怎么刷新数据都不会丢失传参数的页面设置 xiang(row) { this.id ...
收起
js刷新页面的几种方法
万次阅读 2019-05-14 10:35:34
在前端开发过程中，我们经常需要通过刷新当前的页面来实现某些功能，一起来了解下前端刷新页面有哪些方式呢？ reload刷新法 reload方法，用来强制浏览器刷新当前页面。语法： loaction.reload([bForceGet]) 参数：...
收起
微信小程序 刷新页面
万次阅读 2018-09-05 15:45:28
刷新页面，其实就是刷新页面上的数据。一般页面数据加载函数都写在 onLoad 或者 onShow 的回调函数中。所以我们只要获取当前页面，完后手动调用这两个函数即可 let pages = getCurrentPages() //获取页面数组 let ...
收起
微信小程序 js
vue 项目刷新页面, 保留当前页面状态
千次阅读 2020-02-27 20:24:03
问题 : 在vue项目中,刷新页面之后,之前的登录信息, 打开的所有菜单,都消失, 如何实现刷新之后页面仍然是刷新之前的状态解决 : 使用vuex状态管理, 搭配 , webstorage本地存储. 将vuex里面的数据同步更新到 ...
收起
vue vue.js 前端
nc刷新页面
千次阅读 2015-08-27 09:10:29
nc刷新页面 private void refreshSingle(Object obj) throws Exception { if (obj != null) { AbstractBill oldVO = (AbstractBill) obj; String pk = oldVO.getParentVO().getPr
收起
jsp局部刷新页面、异步加载页面方案
万次阅读 2017-01-24 11:13:49
jsp局部刷新页面、异步加载页面方案 1.在jsp页面需要刷新的地方增加一个控件 2.新建一个jsp页面：aaa.jsp（用来放置需要刷新的内容） 3.向后台异步请求数据的方式刷新页面，后台返回一个jsp，来对需要刷新的控件赋值...
收起
java jsp
小程序跳到tabTar页面刷新页面
千次阅读 2019-06-03 17:30:47
小程序跳转到tabBar页面是不...这里就要刷新页面。 B页面不是tabBar里的页面 click:function(){ getApp().globaData.name='张三' wx.switchTab({ url:'../index/index', success:function(){ var page=get...
收起
vue 修改数据刷新页面
千次阅读 2019-05-24 14:18:42
vue 项目中，如果更新一条...此时运用provide/inject 来局部刷新页面。 1.父组件中，定义reload 方法，其中有一个 isRouterAlive变量，定义在data中。 2.定义 provide，代码如下 export default { provide(){ ...
收起
js刷新页面的重置
千次阅读 2018-05-02 15:42:08
js刷新页面后实现的功能，刷新页面的方法：1，reload 方法，该方法强迫浏览器刷新当前页面。语法：location.reload([bForceGet]) 参数： bForceGet，可选参数，默认为 false，从客户端缓存里取当前页。true, 则以...
收起

Vue刷新页面的三种方式

(精华)2020年7月13日 微信小程序 获取页面栈来刷新页面

网站开发进阶(二十六)js刷新页面方法大全

js刷新页面方法大全

1. reload 方法

2. replace 方法

附：

自动刷新页面的方法

1. 页面自动刷新

2. 页面自动跳转

3. 页面自动刷新js版

4. JS刷新框架的脚本语句

iframe刷新页面时不刷新父页面

刷新页面回到页面顶部

点击浏览器的刷新按钮刷新

vue跳转页面后刷新页面

跳转页面

新页面取参数

AngularJs 刷新页面

浏览器刷新页面

Android刷新页面

uniapp跳转页面成功之后，刷新页面

a链接刷新页面与js刷新页面用法示例介绍

jq 刷新页面，刷新父级页面，iframe刷新父级页面

Vue 路由切换时页面刷新页面

a链接刷新页面与js刷新页面用法示例介绍【HTML几种常用返回页面方法】

后端刷新和前端刷新页面的过程

小程序tabBar，返回tabBar不刷新页面，进入tabBar刷新页面

h5实现刷新页面

解决-刷新页面Vuex数据丢失

小程序里页面后退怎么刷新页面

刷新页面和自动刷新页面

vue页面刷新页面数据不在的问题

js刷新页面的几种方法

微信小程序 刷新页面

vue 项目刷新页面, 保留当前页面状态

nc刷新页面

jsp局部刷新页面、异步加载页面方案

小程序跳到tabTar页面刷新页面

vue 修改数据刷新页面

js刷新页面的重置

刷新页面

计算机网络基础

新一轮5G建设招标开启

金三银四面试必看：十年面试官告诉你JMM是什么和面什么

量化高频交易系统tick数据采集

三维地图GIS大数据可视化

python练习9.3

thinkphp5.1博客后台实战视频

SubstancePainter插件开发-基础入门

新闻列表页的制作

【数据分析-随到随学】SPSS调查问卷统计分析

linux java 命令安装好找不到

2020牛客多校暑期集训营第八场题解.pdf

自己临时实用存储一下

【数据分析-随到随学】互联网行业业务指标及行业数

2021全网最详细【WEB前端】从零入门实战教程，全课程119节

部分常见的web网页攻击的简单记录

作业四

RPC 用着好好的？为什么还需要使用 MQ？

【数据分析-随到随学】数据分析基础及方法论

科技推开粒子特效.zip

(精华)2020年7月13日微信小程序获取页面栈来刷新页面

微信小程序刷新页面