前言

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方法,在极端情况下,比如网络极端恶劣,那么可能出现跳到空页面后跳不会来,或者干脆跳不到空页面的情况,大家需要根据自己的项目情况酌情选择。

总结

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

标签:
vue.js,刷新页面,vue,刷新当前页面,vue怎么刷新当前页面

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

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

暂无“vue.js实现刷新当前页面的方法教程”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。