详解vue之页面缓存问题(基于2.0)


Posted in Javascript onJanuary 10, 2017

比如有一个列表页面,然后列表每项都有一个详情,之前用vue1.x的时候,页面缓存基本没有什么问题。

在vue2.0中出现了列表页面是每次都重新加载数据,但是详情页面却只在第一次加载的时候调用数据,如果返回到列表再进入详情那么页面是不会重新渲染页面,可能是新手吧,这个问题困扰了我很久,一直没有办法解决……

根据vue-router的官方文档所说,

watch: {
  // 如果路由有变化,会再次执行该方法
  '$route': 'fetchData'
 }

按照这样写了,但是页面还是没有渲染

.

.

.

于是就想啊想,想啊想……

以为是路由没有变,我就在页面路由后面加何种参数包括时间戳

但是都没有解决这个问题

……

后来经过多次尝试终于找到问题所在

watch 方法检测路由变化确实生效了,但是页面有些关键数据没有清空还是缓存的上一次的数据,所以导致每次加载页面都不会重新渲染数据,所以找到关键数据,在每次路由发生变化的时候重置关键数据即可

例如:

for(var i =0; i<response.data.length; i++) {
      if(response.data[i].id = this.orderId) {
       this.order = response.data[i]
      }
     }
watch: {
   '$route': function () {
    this.orders = []
    this.fetchData()
    this.orderId = this.$route.params.orderId
   }
  }

这里我的关键数据就是 orderId

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

Javascript 相关文章推荐
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
JavaScript 面向对象之命名空间
May 04 Javascript
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
javascript canvas API内容整理
Feb 16 Javascript
Node.js实现断点续传
Jun 23 Javascript
jQuery验证表单格式的使用方法
Jan 10 #Javascript
Html5 js实现手风琴效果
Apr 17 #Javascript
jquery做个日期选择适用于手机端示例
Jan 10 #Javascript
javascript删除html标签函数cIsHTML
Jan 09 #Javascript
jQuery.parseHTML() 函数详解
Jan 09 #Javascript
微信小程序 用户数据解密详细介绍
Jan 09 #Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 #Javascript
You might like
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
js倒计时小程序
2013/11/05 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
js返回顶部实例分享
2016/12/21 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
python使用knn实现特征向量分类
2018/12/26 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
python db类用法说明
2020/07/07 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
外贸业务员岗位职责
2015/02/13 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书