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 相关文章推荐
Javascript实现的分页函数
Dec 22 Javascript
经常用到的JavasScript事件的翻译
Apr 09 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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
一个改进的UBB类
2006/10/09 PHP
PHP音乐采集(部分代码)
2007/02/14 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
js实现图片360度旋转
2017/01/22 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
Python同时迭代多个序列的方法
2020/07/28 Python
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
机械设计制造专业个人求职信
2013/09/25 职场文书
研究生自我鉴定范文
2013/10/30 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
2014年教研室工作总结
2014/12/06 职场文书
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
利用Apache Common将java对象池化的问题
2022/06/16 Servers
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android