什麼是KeepAlive？

首先，我們要明確我們談的是TCP的 KeepAlive 還是HTTP的 Keep-Alive。TCP的KeepAlive和HTTP的Keep-Alive是完全不同的概念，不能混為一談。實際上HTTP的KeepAlive寫法是Keep-Alive，跟TCP的KeepAlive寫法上也有不同。

• TCP的keepalive是側重在保持客戶端和服務端的連線，一方會不定期傳送心跳包給另一方，當一方端掉的時候，沒有斷掉的定時傳送幾次心跳包，如果間隔傳送幾次，對方都返回的是RST，而不是ACK，那麼就釋放當前連結。設想一下，如果tcp層沒有keepalive的機制，一旦一方斷開連線卻沒有傳送FIN給另外一方的話，那麼另外一方會一直以為這個連線還是存活的，幾天，幾月。那麼這對伺服器資源的影響是很大的。
• HTTP的keep-alive一般我們都會帶上中間的橫槓，普通的http連線是客戶端連線上服務端，然後結束請求後，由客戶端或者服務端進行http連線的關閉。下次再發送請求的時候，客戶端再發起一個連線，傳送資料，關閉連線。這麼個流程反覆。但是一旦客戶端傳送connection:keep-alive頭給服務端，且服務端也接受這個keep-alive的話，兩邊對上暗號，這個連線就可以複用了，一個http處理完之後，另外一個http資料直接從這個連線走了。減少新建和斷開TCP連線的消耗。

二者的作用簡單來說：

HTTP協議的Keep-Alive意圖在於短時間內連線複用，希望可以短時間內在同一個連線上進行多次請求/響應。

TCP的KeepAlive機制意圖在於保活、心跳，檢測連線錯誤。當一個TCP連線兩端長時間沒有資料傳輸時(通常預設配置是2小時)，傳送keepalive探針，探測連結是否存活。

總之，記住HTTP的Keep-Alive和TCP的KeepAlive不是一回事。

tcp的keepalive是在ESTABLISH狀態的時候，雙方如何檢測連線的可用行。而http的keep-alive說的是如何避免進行重複的TCP三次握手和四次揮手的環節。

正文開始。

vue可以通過<keep-alive>元素包裹元件，實現快取，下次使用時不需要重新建立該元件。但存在一個問題：keep-alive包裹的元件中有滾動元素時，keep-alive

實現後退不重新整理主要依據keep-alive元件的activated和deactivated這兩個生命週期鉤子函式。

vue鉤子函式的執行順序:

不使用keep-alive

beforeRouteEnter --> created --> mounted --> destroyed

使用keep-alive

初次進入頁面，beforeRouteEnter --> created --> mounted --> activated --> deactivated

再次進入快取的頁面，只會觸發beforeRouteEnter -->activated --> deactivated。created和mounted不會再執行。

其中，

activated在keep-alive元件啟用時呼叫.

deactivated在keep-alive元件被停用時呼叫.

Demo 實現了後退不重新整理，並且返回時滾動到上次瀏覽的深度。

該demo中，包含三個連結導航。

home --> pageA --> pageB --> pageC

依次前進，每次前進到一個新頁面都需要獲取資料，而按下後退鍵後，

從pageC返回到pageB，pageB不再獲取新資料，而是使用之前快取的資料。

從pageB返回到pageA時，pageA不再獲取新資料，而是使用之前的資料。並且當pageA存在滾動條時，返回時會滾動到上次瀏覽高度。

所以，pageA和pageB需要快取，pageC不需要快取。

//router.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);

const router = new Router({
 mode: 'hash',routes: [
 {
  path: '/',name: 'home',component: () =>
  import('./views/Home.vue'),meta: {
  title: '首頁',keepAlive: false //此元件不需要被快取
  }
 },{
  path: '/pageA',name: 'pageA',component: () =>
   import('./views/pageA.vue'),meta: {
  title: 'pageA',keepAlive: true,isBack: false
  }
 },{
  path: '/pageB',name: 'pageB',component: () =>
   import('./views/pageB.vue'),meta: {
  title: 'pageB',{
  path: '/pageC',name: 'pageC',component: () =>
   import('./views/pageC.vue'),meta: {
  title: 'pageC',keepAlive: false
  }
 }
 ]
});
export default router;
//pageA.vue
<template>
 <div class="page-a">
  <h1>pageA</h1>
  <div>
   <div class="item" v-for="item in items" @click="goPageB">
    {{ item }}
   </div>
  </div>
  <h1 @click="goPageB">go pageB</h1>
 </div>
</template>

<script>
 export default {
  name: 'PageA',data() {
   return {
    msg: "我是PageA頁面",items: Array.from({length:50},(v,k) => k),data: "",scrollTop: 0
   };
  },beforeRouteEnter(to,from,next) {
   if(from.name == 'pageB'){
    to.meta.isBack = true;
   }

   next();
  },mounted() {
   console.log('mounted....');
   // this指向元件的例項，$el指向當前元件的DOM元素
   const $el = this.$el;
   //滾動事件
   $el.addEventListener("scroll",() => {
    //記錄位置
    this.scrollTop = $el.scrollTop;
   });
  },activated() {
   if(!this.$route.meta.isBack){
    // 如果isBack是false，表明需要獲取新資料，否則就不再請求，直接使用快取的資料
    this.getData();
   } else {
    //恢復滾動條高度
    if(this.scrollTop) {
     setTimeout(() => {
      this.$el.scrollTop = this.scrollTop;
     },100);
    }
   }
   // 恢復成預設的false，避免isBack一直是true
   this.$route.meta.isBack = false;

  },methods: {
   getData() {
    // getData方法，模擬從後臺請求資料
    this.data = "資料";
    console.log('get data')
   },goPageB(){
    this.$router.push({ path: "/pageB" });
   },back() {
    this.$router.push({ path: "/" });
   }
  },}
</script>
<style>
 .page-a {
  height: 100vh;
  overflow-y: auto;
 }
 .item {
  margin: 5px;
  padding: 10px;
  background: #ccc;
 }
</style>

程式碼請參考連結 ；

後退不重新整理還可以通過include實現，可參考連結

總結

到此這篇關於Vue中keep-alive 實現後退不重新整理並保持滾動位置的文章就介紹到這了,更多相關keep-alive 後退不重新整理持滾動位置內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！