vue this.reload 方法 配置


Posted in Javascript onSeptember 12, 2018

1.场景

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

2.遇到的问题

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

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

3.解决方法

provide / inject 组合

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

我的项目配置:

①home.vue

<router-view v-if="isReloadAlive"></router-view>

vue this.reload 方法 配置  vue this.reload 方法 配置

export default {
 provide() {
   return {
    reload: this.reload
   }
 },
 data(){
  isReloadAlive : true
 },
 methods: {
  reload() {
 this.isReloadAlive = false;
 this.$nextTick(function(){
 this.isReloadAlive = true;
 })
 }
 }
}

②使用reload方法的页面

 内容管理 - 投顾推荐  tgtj.vue

export default {
 inject: ['reload'],  // 注入 reload 方法
 data(){
  。。。。
 },
 method: {
  set: function(id){
    let param = {
     "recommendedConsultant.id": this.recommendedConsultant_id,
     "recommendedConsultant.sequence": this.recommendedConsultant_sequence,
     "recommendedConsultant.consultant_id": id
    }
    setRecommendedAdvisor(param).then((data) => {
     this.$message({ message: data.ret.retMsg });
     if(data.ret.succeed){
      this.reload()   // 调用刷新方法
     }
    });
  }
 }
}

总结

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

Javascript 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
摘自启点的main.js
Apr 20 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 #jQuery
JS中判断字符串存在和非空的方法
Sep 12 #Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 #Javascript
微信小程序实现tab左右切换效果
Nov 15 #Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 #Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 #Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 #Javascript
You might like
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
Javascript 对象的解释
2008/11/24 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
npm scripts 使用指南详解
2018/10/08 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
Python3分析处理声音数据的例子
2019/08/27 Python
Python中常见的数制转换有哪些
2020/05/27 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
户外用品商店创业计划书
2014/01/29 职场文书
2014年情人节活动方案
2014/02/16 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
离婚案件原告代理词
2015/05/23 职场文书
可可西里观后感
2015/06/08 职场文书
七年级语文教学反思
2016/03/03 职场文书
七年级话题作文之执着
2019/11/19 职场文书