keepAlive使用

用vue作後臺管理項目，特別是有列表頁、列表數據詳情頁、列表數據修改頁功能的碼友們，幾乎都被vue前進後退都刷新的邏輯坑過，有時候須要保存組件狀態,
要求 :

1.列表頁進入詳情頁返回列表頁時列表不能刷新，連頁數、篩選條件等都不能變

2.列表頁進列表數據編輯頁若數據有改動返回列表頁列表數據得刷新，但頁數、篩選條件等都不能變

3.非詳情頁、編輯頁進入列表頁時列表數據得刷新，頁數、篩選條件等都所有重置

總結一下就是‘這個列表頁我想讓它刷新，他就得刷新，不想讓他刷，他就無變化

那麼是啥呢?對,是keep-alive組件，對，是它。

但單純的keep-alive是前進後退都不會刷新的，因此須要改造一下，讓它乖乖聽話。這個過程須要路由路由參數meta配合咱們。

1.在路由文件中爲目標列表頁設置meta參數，裏面包含keepAlive和ifDoFresh字段

複製代碼
{
path:'*',
name:'datalists',
component: resolve => require(['@/view/datalist'], resolve),
meta:{
keepAlive: true,
ifDoFresh:false
}
},

複製代碼

2.在程序主入口main.vue中設置頁面根據keepAlive字段判斷是否使用keep-alive組件。

複製代碼
<div class="main">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>
</div>

複製代碼
3.在目標列表頁的beforeRouteEnter方法中判斷頁面進入方式（詳情頁，編輯頁或其餘方式），根據需求將路由參數的ifDoFresh字段設爲true/false，

在頁面的activated（開啓了 keepAlive: true的頁面在第二次進入時是沒法觸發mounted發法的）方法中根據ifDoFresh字段判斷是否刷新頁面。

複製代碼beforeRouteEnter (to, from, next) {if(from.name!='詳情頁'&&from.name!='編輯頁'){ to.meta.ifDoFresh = true; } next(); }, activated(){ //開啓了keepAlive:true後再次進入，之前的搜索條件和頁數都不會變，不管什麼狀況都調用一下獲取數據的接口，這樣就能獲得當前搜索條件和頁數的最新數據if(this.$route.meta.ifDoFresh){//重置ifDoFreshthis.$route.meta.ifDoFresh = false;　　//獲取列表數據方法第一參數爲是否重置搜索條件和頁數this.getData(true);}else{this.getData();}}完結！