用vue做后臺管理項(xiàng)目，特別是有列表頁、列表數(shù)據(jù)詳情頁、列表數(shù)據(jù)修改頁功能的碼友們，幾乎都被vue前進(jìn)后退都刷新的邏輯坑過，有時候需要保存組件狀態(tài),
要求 :

成都創(chuàng)新互聯(lián)公司專注于富平企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),電子商務(wù)商城網(wǎng)站建設(shè)。富平網(wǎng)站建設(shè)公司,為富平等地區(qū)提供建站服務(wù)。全流程按需策劃，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

1.列表頁進(jìn)入詳情頁返回列表頁時列表不能刷新，連頁數(shù)、篩選條件等都不能變

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

3.非詳情頁、編輯頁進(jìn)入列表頁時列表數(shù)據(jù)得刷新，頁數(shù)、篩選條件等都全部重置

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

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

但單純的keep-alive是前進(jìn)后退都不會刷新的，所以需要改造一下，讓它乖乖聽話。這個過程需要路由路由參數(shù)meta配合我們。

1.在路由文件中為目標(biāo)列表頁設(shè)置meta參數(shù)，里面包含keepAlive和ifDoFresh字段

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

復(fù)制代碼

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

復(fù)制代碼

復(fù)制代碼
3.在目標(biāo)列表頁的beforeRouteEnter方法中判斷頁面進(jìn)入方式（詳情頁，編輯頁或其他方式），根據(jù)需求將路由參數(shù)的ifDoFresh字段設(shè)為true/false，

在頁面的activated（開啟了 keepAlive: true的頁面在第二次進(jìn)入時是無法觸發(fā)mounted發(fā)法的）方法中根據(jù)ifDoFresh字段判斷是否刷新頁面。

復(fù)制代碼
beforeRouteEnter (to, from, next) {
if(from.name!='詳情頁'&&from.name!='編輯頁')
{
to.meta.ifDoFresh = true;
}
next();
},
activated(){
//開啟了keepAlive:true后再次進(jìn)入，以前的搜索條件和頁數(shù)都不會變，無論什么情況都調(diào)用一下獲取數(shù)據(jù)的接口，這樣就能得到當(dāng)前搜索條件和頁數(shù)的最新數(shù)據(jù)
if(this.$route.meta.ifDoFresh){
//重置ifDoFresh
this.$route.meta.ifDoFresh = false;
　　//獲取列表數(shù)據(jù)方法第一參數(shù)為是否重置搜索條件和頁數(shù)
this.getData(true);
}else{
this.getData();
}
}
完結(jié)！

本文名稱：keepAlive使用-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://weahome.cn/article/jscpc.html