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 相关文章推荐
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
sails框架的学习指南
Dec 22 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
angular学习之动态创建表单的方法
Dec 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
如何在php中正确的使用json
2013/08/06 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
vue 设置路由的登录权限的方法
2018/07/03 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
pytorch 求网络模型参数实例
2019/12/30 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
Linux Interview Questions For software testers
2012/06/02 面试题
摄影实习自我鉴定
2013/09/20 职场文书
个人自我鉴定
2013/11/07 职场文书
加拿大留学自荐信
2014/01/28 职场文书
培训讲师岗位职责
2014/04/13 职场文书
会计个人实习计划书
2014/08/15 职场文书
国家助学金感谢信
2015/01/21 职场文书
乒乓球比赛通知
2015/04/27 职场文书
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python