keepalive，是在TCP中一個可以檢測死連接的機制。

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

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

1.如果主機可達，對方就會響應ACK應答，就認為是存活的。

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

3.如果可達，但應用程序崩潰，對方就發(fā)RST消息。

4.如果對方主機不響應ack, rst，繼續(xù)發(fā)送直到超時，就撤消連接。這個時間就是默認的二個小時。

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

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

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

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

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

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

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

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

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

復制代碼

2.在程序主入口main.vue中設置頁面根據(jù)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方法中判斷頁面進入方式（詳情頁，編輯頁或其他方式），根據(jù)需求將路由參數(shù)的ifDoFresh字段設為true/false，

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

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

文章題目：keepAlive的使用方法
當前路徑：http://jinyejixie.com/article26/ggsojg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、用戶體驗、外貿(mào)建站、網(wǎng)頁設計公司、定制開發(fā)、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)