如何解决vue页面缓存问题-创新互联

这篇文章给大家分享的是有关如何解决vue页面缓存问题的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联是一家以网站建设、网页设计、品牌设计、软件运维、网站推广、小程序App开发等移动开发为一体互联网公司。已累计为花箱等众行业中小客户提供优质的互联网建站和软件开发服务。

比如有一个列表页面，然后列表每项都有一个详情，之前用vue1.x的时候，页面缓存基本没有什么问题。

在vue2.0中出现了列表页面是每次都重新加载数据，但是详情页面却只在第一次加载的时候调用数据，如果返回到列表再进入详情那么页面是不会重新渲染页面，可能是新手吧，这个问题困扰了我很久，一直没有办法解决……

根据vue-router的官方文档所说，

watch: {
  // 如果路由有变化，会再次执行该方法
  '$route': 'fetchData'
 }

按照这样写了，但是页面还是没有渲染

.

.

.

于是就想啊想，想啊想……

以为是路由没有变，我就在页面路由后面加何种参数包括时间戳

但是都没有解决这个问题

……

后来经过多次尝试终于找到问题所在

watch 方法检测路由变化确实生效了，但是页面有些关键数据没有清空还是缓存的上一次的数据，所以导致每次加载页面都不会重新渲染数据，所以找到关键数据，在每次路由发生变化的时候重置关键数据即可

例如：

for(var i =0; i
 watch: {
   '$route': function () {
    this.orders = []
    this.fetchData()
    this.orderId = this.$route.params.orderId
   }
  }
这里我的关键数据就是 orderId
感谢各位的阅读！关于“如何解决vue页面缓存问题”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
            

            网页名称：如何解决vue页面缓存问题-创新互联            

            URL分享：http://6mz.cn/article/egcii.html