详解vue之页面缓存问题(基于2.0)
更新时间：2017年01月10日 09:05:42 作者：莎莉哇
本篇文章主要介绍了vue之页面缓存问题(基于2.0)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
比如有一个列表页面，然后列表每项都有一个详情，之前用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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了简易 Vue 评论框架的实现(父组件的实现)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
本文主要介绍了el-menu动态加载路由的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
本文主要介绍了vue-json-editor json编辑器的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
vue-loader和webpack项目配置及npm错误问题的解决
这篇文章主要介绍了vue-loader和webpack项目配置及npm错误问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue中使用iconfont图标的过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要给大家介绍了关于vue单文件中引用路径处理的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
这篇文章主要介绍了浅谈vuejs实现数据驱动视图原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
通过配置多页面应用，从而将给子模块依赖分隔开各自加载，可以减少初始资源的请求，加快页面的访问速度，这篇文章主要介绍了vue3+vite配置多页面的详细过程,需要的朋友可以参考下2023-06-06
这篇文章主要给大家介绍了关于vue3获取、设置元素高度的相关资料,小编通过实际案例向大家展示操作过程,操作方法简单易懂,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了Vue实战教程之仿肯德基宅急送App，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
最新评论