vue之页面缓存问题(基于2.0)

 

为什么会有这篇文章

　　在vue2.0中出现了列表页面是每次都重新加载数据，但是详情页面却只在第一次加载的时候调用数据，如果返回到列表再进入详情那么页面是不会重新渲染页面。

　　1 用vue-router 重新路由的时候到当前页面的时候是不进行刷新的 

　　2 采用window.reload() 或者router.go(0) hisory.go(0) 刷新的时候整个浏览器进行刷新加载， 但是页面闪烁， 体验不好

　　

　解决方法1：

　　用watch监听路由是否变化，如果变化重新加载数据

watch: {
    '$route': function() {
        this.listts();　　// 这边调用获取数据的方法
    }
},

 

　解决方法2：

<template>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

使用Vue组件切换过程钩子activated(keep-alive组件激活时调用)，而不是挂载钩子mounted：

<script>
export default {
  // ...
  activated: function() {
    this.getCase()
  }
}
</script>