vue项目刷新当前页面的三种方法
本文介绍了vue项目刷新当前页面的三种方法,本文图文并茂给大家介绍的非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下。 |
想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:
如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下
那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上
这时候我们最直接的思维就是想到下面这种:
但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本没有任何作用~所以这个方法out!
下面我这边整理几种可圈可点的三种方式,大家可以自行的选择:
1、最直接整个页面重新刷新
location. reload() this.$router.go(0)
这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好。
2、新建一个空白页面
新建一个空白页面supplierAllBack.vue,点击确定的时候先跳转到这个空白页,然后再立马跳转回来。
空白页supplierAllBack.vue里面的内容:
这个方式,相比第一种不会出现一瞬间的空白页,只是地址栏有个快速的切换的过程,可采用
3、provide / inject 组合
这是我试过最实用的,下面用项目截图给大家说明下:首先,要修改下你的app.vue
通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载,这边定义了
isRouterAlive //true or false 来控制
然后在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用this.reload来调用就行
vue项目刷新当前页面的三种方法相关推荐
- Vue项目实战02 : vue项目刷新当前页面的三种方法
想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 这时候我们最直接的思维就是想到下面这种: 但是,试过的会发现用vue-router ...
- JavaScript刷新当前页面的三种方法,载入新文档替换当前页面
通过JavaScript刷新当前页面的三种方法代码就可以简单的实现,首先我们来看三种刷新当前页的方法: reload() 方法; replace() 方法; 页面自动刷新; 方法1:reload() ...
- vue的html自动刷新,vue项目刷新当前页面的方法
想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://loca ...
- Vue项目中刷新当前页面的四种方法
Vue项目中刷新当前页面的四种方法 前记 刷新当前页面的四种方法 this.$router.go(0) location.reload() 跳转空白页再跳回原页面 使用provide / inject ...
- html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
JavaScript location.reload() 方法 Location 对象的 reload() 方法用于重新加载当前文档(页面),语法如下: location.reload( false| ...
- 用js刷新当前页面的几种方法,包括reload方法、replace方法、自动刷新方法等。
如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet ...
- JS刷新当前页面的几种方法总结
本文出自:http://www.jb51.net/article/44764.htm.http://blog.csdn.net/cj649934578/article/details/8965003 ...
- vue项目刷新当前页面的方法
尝试了几种刷新页面的方法, 比如 : 1.浏览器直接刷新(会出现短暂的白页面现象) 2.设置一个空白页面,需要刷新的时候跳转到空页面再从空页面跳回来 (些许麻烦) 3.使用 provide /inje ...
- 前端工程师必须知道的用javaScript刷新当前页面的3种方法
业务场景:APP列表页右上角有一个立即刷新按钮,点击立即刷新需要刷新当前页面.下面简单实现几个DEMO 效果图 目录 方法1:reload() 方法 方法2:replace() 方法
最新文章
- Java云托管服务的开支削减策略
- Redis 通用操作1
- 实验楼项目课学习笔记-jQuery翻转拼图游戏
- 从vuex源码分析module与namespaced
- Dreamweaver使用详解
- Mac计算器的计算过程怎么看?教你一键查看运算记录!
- rel=alternate stylesheet属性
- [转]Ubuntu terminator 无法打开解决方案
- 淘宝开源的代码质量检测工具,太强大了!!
- 如何使用Highscore进行XRD物相分析?
- html编辑器pp,在线轻设计工具之H5
- 64位linux nvidia 32位,NVIDIA英伟达显卡驱动下载
- 蔡凯龙:跨界是一种寻求人生宽度的方式
- 当浏览器默认禁用第三方cookie
- 菜鸟的Android之路-02《eclipse新建android project》
- 游戏技能效果与buff设定
- ai智能文章生成器-ai论文写作
- 手动安装 Spyder 4.0 beta 版
- 服务器接显示器显示不支援,Win10专业版显示器输入不支援怎么办?如何解决?...
- 仙剑游戏系列..感想