keepalive，是在TCP中一個(gè)可以檢測(cè)死連接的機(jī)制。

惠東網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)建站從2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

keepalive原理很簡(jiǎn)單，TCP會(huì)在空閑了一定時(shí)間后發(fā)送數(shù)據(jù)給對(duì)方:

1.如果主機(jī)可達(dá)，對(duì)方就會(huì)響應(yīng)ACK應(yīng)答，就認(rèn)為是存活的。

2.如果可達(dá)，但應(yīng)用程序退出，對(duì)方就發(fā)FIN應(yīng)答，發(fā)送TCP撤消連接。

3.如果可達(dá)，但應(yīng)用程序崩潰，對(duì)方就發(fā)RST消息。

4.如果對(duì)方主機(jī)不響應(yīng)ack, rst，繼續(xù)發(fā)送直到超時(shí)，就撤消連接。這個(gè)時(shí)間就是默認(rèn)的二個(gè)小時(shí)。

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

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

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

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

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

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

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

1.在路由文件中為目標(biāo)列表頁(yè)設(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è)置頁(yè)面根據(jù)keepAlive字段判斷是否使用keep-alive組件。

復(fù)制代碼

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

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

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