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>