详解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 相关文章推荐
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
js密码强度检测
Jan 07 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
Angular6新特性之Angular Material
Dec 28 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检测useragent版本示例
2014/03/24 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
canvas绘制的直线动画
2017/01/23 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
vc6编写python扩展的方法分享
2014/01/17 Python
Python中optparse模块使用浅析
2015/01/01 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
python hook监听事件详解
2018/10/25 Python
利用Python计算KS的实例详解
2020/03/03 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
Hibernate持久层技术
2013/12/16 面试题
农村婚礼证婚词
2014/01/10 职场文书
物流管理专业求职信
2014/05/29 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
MySQL实现配置主从复制项目实践
2022/03/31 MySQL