vue项目刷新当前页面的三种方法


Posted in Javascript onDecember 04, 2018

想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:

vue项目刷新当前页面的三种方法

如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下

那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上

这时候我们最直接的思维就是想到下面这种:

vue项目刷新当前页面的三种方法

但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本没有任何作用~所以这个方法out!

下面我这边整理几种可圈可点的三种方式,大家可以自行的选择:

1、最直接整个页面重新刷新:

vue项目刷新当前页面的三种方法

location. reload()
this.$router.go(0)

这两种都可以刷新当前页面的,缺点就是相当于按ctrl+F5 强制刷新那种,整个页面重新加载,会出现一个瞬间的空白页面,体验不好

2、新建一个空白页面supplierAllBack.vue,点击确定的时候先跳转到这个空白页,然后再立马跳转回来

vue项目刷新当前页面的三种方法

空白页supplierAllBack.vue里面的内容:

vue项目刷新当前页面的三种方法

这个方式,相比第一种不会出现一瞬间的空白页,只是地址栏有个快速的切换的过程,可采用

3、provide / inject 组合 方式是我试过最实用的,下面用项目截图给大家说明下:首先,要修改下你的app.vue

vue项目刷新当前页面的三种方法

通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载,这边定义了

isRouterAlive //true or false 来控制

然后在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用this.reload来调用就行

vue项目刷新当前页面的三种方法

总结

以上所述是小编给大家介绍的vue项目刷新当前页面的三种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
javascript 页面划词搜索JS
Sep 28 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 #Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 #Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 #Javascript
React Native中Mobx的使用方法详解
Dec 04 #Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 #Javascript
elementUI中Table表格问题的解决方法
Dec 04 #Javascript
zepto.js 实时监听输入框的方法
Dec 04 #Javascript
You might like
php变量范围介绍
2012/10/15 PHP
php5.3 注意事项说明
2013/07/01 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
JavaScript简介
2015/02/15 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
python中遍历文件的3个方法
2014/09/02 Python
Python封装shell命令实例分析
2015/05/05 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
详解Python自建logging模块
2018/01/29 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
基于python实现删除指定文件类型
2020/07/21 Python
查询优化的一般准则有哪些
2015/03/08 面试题
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
犯错检讨书
2014/02/21 职场文书
纠风工作实施方案
2014/03/15 职场文书
2014年除四害工作总结
2014/12/06 职场文书
长城导游词
2015/01/30 职场文书
社区敬老月活动总结
2015/05/07 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL