-
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();
-
-
网站开发进阶(二十六)js刷新页面方法大全
2016-01-01 12:08:49js刷新页面方法大全 在项目开发过程中,需要实现刷新页面。经过学习,发现下面这条语句就可以轻松实现。 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>
-
iframe刷新页面时不刷新父页面
2015-11-19 04:00:51session过期之后刷新页面跳转到登陆页面的时候父页面不刷新,父页面里面包含登录的页面 -
刷新页面回到页面顶部
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
新页面取参数
-
AngularJs 刷新页面
2017-01-17 15:51:46AngularJs 刷新页面可采用下面的方式:首先先在控制器中注册$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:00Android刷新页面 继承 extends Activity/*** 调用onCreate(), 目的是刷新数据,从另一activity界面返回到该activity界面时, 此方法自动调用*/ @Override public void onResume() { super.onResume(); o... -
uniapp跳转页面成功之后,刷新页面
2019-08-27 16:04:47uni.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的效果在我这没起作用,我直接写的刷新当前... -
后端刷新和前端刷新页面的过程
2018-10-16 21:05:47加粗样式对于服务器开发工程师来说,前段页面的刷新分 : 后端刷新和前端刷新 后端刷新的实现是通过模板加数据的方式实现的 ...不管是后端刷新还是前端刷新 ...1 后端刷新页面的流程 1.1 实现服务器的API接口文档... -
小程序tabBar,返回tabBar不刷新页面,进入tabBar刷新页面
2018-09-30 22:33:002、场景如下图:报修进入下一步,返回第一步时不能刷新页面(即保留页面数据),从其他tabBar进入报修页面时就需要清空可能已经填写的数据。 3、解决办法,在第二步页面做了一个本地存储变量,在第一步的页面判断... -
h5实现刷新页面
2018-12-15 11:17:36window.location.reload(),window.history.go(0)和...Javascript刷新页面的几种方法: 1 history.go(0) 除非有<%..%>等需在服务端解释才能生成的页面代码,否则直接读取缓存中的数据 不刷新 2 ... -
解决-刷新页面Vuex数据丢失
2020-07-02 15:02:33vue刷新页面vuex数据丢失 vuex数据丢失 vue刷新页面 -
小程序里页面后退怎么刷新页面
2018-12-06 13:42:16即后退刷新页面。 刚开始以为是书写顺序,检查好几遍发现不是,根本原因是页面在返回之后没有刷新。那么怎么解决,查了好多资料。 其实咱们小程序不存在页面刷新,只需要掌握好生命周期,那这个问题就OK了。 比如... -
刷新页面和自动刷新页面
2006-06-22 10:00:00刷新本页面:代码:刷新自动刷新页面:在HTML的与之间加入下面这段代码,则在5分钟之后正在浏览的页面将会自动变为target.html这一页。代码中300为刷新的延迟时间,以秒为单位。targer.html为你想转向的目标页,若为... -
vue页面刷新页面数据不在的问题
2019-05-28 18:04:13vue页面刷新页面数据不在的问题 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 ... -
vue 项目刷新页面, 保留当前页面状态
2020-02-27 20:24:03问题 : 在vue项目中,刷新页面之后,之前的登录信息, 打开的所有菜单,都消失, 如何实现刷新之后页面仍然是刷新之前的状态 解决 : 使用vuex状态管理, 搭配 , webstorage本地存储. 将vuex里面的数据同步更新到 ... -
nc刷新页面
2015-08-27 09:10:29nc刷新页面 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:49jsp局部刷新页面、异步加载页面方案 1.在jsp页面需要刷新的地方增加一个控件 2.新建一个jsp页面:aaa.jsp(用来放置需要刷新的内容) 3.向后台异步请求数据的方式刷新页面,后台返回一个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:42vue 项目中,如果更新一条...此时运用provide/inject 来局部刷新页面。 1.父组件中,定义reload 方法,其中有一个 isRouterAlive变量,定义在data中。 2.定义 provide,代码如下 export default { provide(){ ... -
js刷新页面的重置
2018-05-02 15:42:08js刷新页面后实现的功能,刷新页面的方法:1,reload 方法,该方法强迫浏览器刷新当前页面。语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以...
-
计算机网络基础
-
新一轮5G建设招标开启
-
金三银四面试必看:十年面试官告诉你JMM是什么和面什么
-
量化高频交易系统tick数据采集
-
三维地图GIS大数据可视化
-
python练习9.3
-
thinkphp5.1博客后台实战视频
-
SubstancePainter插件开发-基础入门
-
新闻列表页的制作
-
【数据分析-随到随学】SPSS调查问卷统计分析
-
linux java 命令安装好找不到
-
2020牛客多校暑期集训营第八场题解.pdf
-
自己临时实用存储一下
-
【数据分析-随到随学】互联网行业业务指标及行业数
-
2021全网最详细【WEB前端】从零入门实战教程,全课程119节
-
部分常见的web网页攻击的简单记录
-
作业四
-
RPC 用着好好的?为什么还需要使用 MQ?
-
【数据分析-随到随学】数据分析基础及方法论
-
科技推开粒子特效.zip