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 相关文章推荐
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
javascript关于“时间”的一次探索
Jul 24 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
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
Javascript 学习笔记 错误处理
2009/07/30 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
python使用mysql的两种使用方式
2018/03/07 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Python @property及getter setter原理详解
2020/03/31 Python
python将音频进行变速的操作方法
2020/04/08 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
大一自我鉴定范文
2013/10/04 职场文书
教师实习自我鉴定
2013/12/18 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
个人原因辞职信模板
2015/05/13 职场文书
2016新年感言
2015/08/03 职场文书
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL
redis protocol通信协议及使用详解
2022/07/15 Redis