详解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 相关文章推荐
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 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
咖啡语言
2021/03/03 咖啡文化
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
对python中return和print的一些理解
2017/08/18 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
Python3计算三角形的面积代码
2017/12/18 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
Python如何在DataFrame增加数值
2020/02/14 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
Weblogic的布署方式
2013/08/23 面试题
学历公证书范本
2014/04/09 职场文书
留学生求职信
2014/06/03 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书