什么是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.jsimport 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’, keepAlive: true, isBack: false } }, { 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 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 后退不刷新持滾動位置內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！