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中的public和private对象,即static修饰符
Jan 18 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
JavaScript Split()方法
Dec 18 Javascript
全面解析bootstrap格子布局
May 22 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
js select实现省市区联动选择
Apr 17 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 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中其实也可以用方法链
2011/11/10 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHP中文乱码解决方案
2015/03/05 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
Python中bisect的用法
2014/09/23 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
Pandas之缺失数据的实现
2021/01/06 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
活动总结怎么写啊
2014/05/07 职场文书
服装设计专业自荐信
2014/06/17 职场文书
党员个人自我评价
2015/03/03 职场文书
作息时间调整通知
2015/04/22 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
Nginx实现负载均衡的项目实践
2022/03/18 Servers