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>

猜你喜欢

转载自www.cnblogs.com/zyulike/p/11039648.html