详解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 相关文章推荐
myeclipse安装jQuery插件的方法
Mar 29 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
Vuex的热更替如何实现
Jun 05 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
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
python采集博客中上传的QQ截图文件
2014/07/18 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Python 从相对路径下import的方法
2018/12/04 Python
django 类视图的使用方法详解
2019/07/24 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
北京SQL新华信咨询
2016/09/30 面试题
三好学生自我鉴定
2013/12/17 职场文书
结婚典礼证婚词
2014/01/08 职场文书
村官学习十八大感想
2014/01/15 职场文书
秘书英文求职信
2014/04/16 职场文书
美容院合作经营协议书
2014/10/10 职场文书
工程款催款函
2015/06/24 职场文书
浅析Python中的套接字编程
2021/06/22 Python
Python实现照片卡通化
2021/12/06 Python
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL