為了讓元件資料緩存，避免每次資源重複加載(例如每次切換導航時資料會重新加載一次，體驗真的差)，是以使用了keep-alive，解決了以上産生的問題。
封面.jpg
一、開啟keep-alive
在這裡keep-alive配合了router-view使用，keep-alive本身是vue2.0的功能，并不是vue-router的，是以在vue1.0版本是不支援的。
二、産生的問題
keep-alive能使元件資料緩存，是以。如果有一個新聞清單，點選進入檢視詳情，傳回點選檢視其他新聞詳情這時發現資料并沒有更新，造成了資料不重新整理的情況。
是以，我試了以下網友提出的解決方法，發現并沒有什麼用(或許是我弄錯了)。
//在router檔案加上meta判斷
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
{//home會被緩存
path:"/home",
component:home,
meta:{keepAlive: true}
}
{//hello不會被緩存
path:"/hello",
component:hello,
meta:{keepAlive: false}
}
})
三、我的解決方法
是以，個人拙見，我是這麼解決的。在詳情元件裡監聽路由變化再次指派給ID，通過activated鈎子觸發請求函數，這時傳回詳情頁面再次進入發現原有的資料還在，但是過幾秒後資料就重新整理了，資料是重新整理了但是體驗是非常不好的。是以需要用到另一個鈎子deactivated銷毀，離開詳情頁面時(deactivated)通過小技巧把目前的内容隐藏，再次進入詳情頁面時(activated)就不會看到原來的内容了，然後ajax請求資料完成後把它顯示出來即可。
當引入keep-alive的時候，頁面第一次進入，鈎子的觸發順序created-> mounted-> activated，退出時觸發deactivated。當再次進入(前進或者後退)時，隻觸發activated。
//$route發生變化時再次指派listId
watch: {
'$route'() {
this.listId = this.$route.params.id;
}
},
//通過activated鈎子觸發請求函數
activated() {
this.getDetail();
},
//傳回詳情頁面時 隐藏内容div區塊 再進入詳情時 顯示内容div區塊
deactivated() {
this.isShowContent = false;
}
四、2019新發現
使用exclude屬性不緩存模闆元件即可，沒有上面那麼複雜了。
//不緩存detail元件