vue.js实现刷新当前页面的方法教程


Posted in Javascript onJuly 05, 2017

前言

Vue.js(是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,是一种数据驱动的前端框架

我们在开发vue的页面的时候,有时候会遇到需要刷新当前页面功能,但是vue框架自带的router是不支持刷新当前页面功能的,它只支持在路由路径变化时刷新页面。基于这个原理,为了实现刷新页面,可以先跳转到一个空页面,然后马上跳回来,从而实现这个功能。

开发工具环境

  • vue.js
  • webstorm

方法如下

一、原理

vue.js实现刷新当前页面的方法教程

如上图所示,我们需要为要刷新的页面A编写一个自动跳回的空页面,当用户操作了A页面后,A页面先跳转到空页面,然后空页面马上跳回A页面,这时候vue会去重新加载A页面。这种方法可以变相实现自我刷新,缺点是当需要刷新的页面较多时,空页面也会随之变多。

二、当前页面事件监听

vue.js实现刷新当前页面的方法教程

如上图所示,我们定义了refreshPage方法,这个方法是对特定事件的回调,在这个方法会处理业务逻辑,然后在最后使用vue的router跳转到一个空页面,这个空页面路由路径是/user/back,这个路径是随便取的,大家可以选择自己的路径

三、空页面的编写

vue.js实现刷新当前页面的方法教程

如上图所示,在空页面中立即执行路由,跳回原来的页面,这时候原来的页面会进行重新加载,从而实现了刷新。这里的/user/index就是跳回原来页面的路由路径,大家需要根据自己的项目情况写。

四、注意事项

本文所使用的方法,其实是一种hack方法,在极端情况下,比如网络极端恶劣,那么可能出现跳到空页面后跳不会来,或者干脆跳不到空页面的情况,大家需要根据自己的项目情况酌情选择。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
js实现文字滚动效果
Mar 03 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
vue router2.0二级路由的简单使用
Jul 05 #Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 #Javascript
AngularJS实现进度条功能示例
Jul 05 #Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 #Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 #Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 #jQuery
jQuery常见面试题之DOM操作详析
Jul 05 #jQuery
You might like
PHP实现多条件查询实例代码
2010/07/17 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
基于header的一些常用指令详解
2013/06/06 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
php计算整个目录大小的方法
2015/06/19 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
2011/08/23 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
Python原始字符串(raw strings)用法实例
2014/10/13 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
python编写猜数字小游戏
2019/10/06 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
python反转列表的三种方式解析
2019/11/08 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
几个数据库方面的面试题
2016/07/01 面试题
推荐信怎么写
2014/05/09 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书