vue项目如何刷新当前页面的方法


Posted in Javascript onMay 18, 2018

1.场景

在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

2.遇到的问题

1. 用vue-router重新路由到当前页面,页面是不进行刷新的

2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好

3.解决方法

provide / inject组合

作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

App.vue:

声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载

vue项目如何刷新当前页面的方法

tableList.vue:

在页面注入App.vue组件提供(provide)的 reload 依赖,在逻辑完成之后(删除或添加...),直接this.reload()调用,即可刷新当前页面。

vue项目如何刷新当前页面的方法

vue项目如何刷新当前页面的方法

4.provide / inject 用法

provide:选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject:一个字符串数组,或一个对象,对象的 key 是本地的绑定名

提示:provideinject绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript操作cookie_获取与修改代码
May 21 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
JS实现容器模块左右拖动效果
Jan 14 Javascript
利用js实现简易红绿灯
Oct 15 Javascript
原生JS实现的碰撞检测功能示例
May 18 #Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 #Javascript
vue.js使用3DES加密的方法示例
May 18 #Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 #Javascript
JS实现调用本地摄像头功能示例
May 18 #Javascript
React全家桶环境搭建过程详解
May 18 #Javascript
vue单页开发父子组件传值思路详解
May 18 #Javascript
You might like
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
最令PHP初学者们头痛的十四个问题
2007/01/15 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
[原创]图片分页查看
2006/08/28 Javascript
JS解密入门之凭直觉解
2008/06/25 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
javaScript语法总结
2016/11/25 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
python如何通过实例方法名字调用方法
2018/03/21 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
python感知机实现代码
2019/01/18 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
消防安全员岗位职责
2014/03/10 职场文书
档案接收函格式
2015/01/30 职场文书
2016年情人节问候语
2015/11/11 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python
Python 发送SMTP邮件的简单教程
2021/06/24 Python
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技