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 相关文章推荐
关于JavaScript的with 语句的使用方法
May 09 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 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 获取客户端的真实ip
2009/11/30 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
PHP实现简易计算器功能
2020/08/28 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
javascript hashtable实现代码
2009/10/13 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
Python实现的栈(Stack)
2018/01/26 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
python归并排序算法过程实例讲解
2020/11/04 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
局火灾防控工作方案
2014/05/25 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
2015年党员自评材料
2014/12/17 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
初中家长评语大全
2014/12/26 职场文书
催款通知书范文
2015/04/17 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
感谢师恩主题班会
2015/08/17 职场文书
小学班长竞选稿
2015/11/20 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
win sever 2022如何占用操作主机角色
2022/06/25 Servers