详解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基础整理1
Dec 06 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
Vue渲染过程浅析
Mar 14 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
vue中activated的用法
Jan 03 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
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代码
2012/09/14 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
php实现的顺序线性表示例
2019/05/04 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
python获取目录下所有文件的方法
2015/06/01 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
Python中过滤字符串列表的方法
2020/12/22 Python
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
银行学习十八大感想
2014/01/11 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript