這篇文章將為大家詳細(xì)講解有關(guān)Vue中keep-alive如何實(shí)現(xiàn)后退不刷新并保持滾動(dòng)位置，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)從2013年開始，先為臨湘等服務(wù)建站，臨湘等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為臨湘企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開發(fā)復(fù)雜的單頁(yè)應(yīng)用。

什么是KeepAlive？

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

• TCP的keepalive是側(cè)重在保持客戶端和服務(wù)端的連接，一方會(huì)不定期發(fā)送心跳包給另一方，當(dāng)一方端掉的時(shí)候，沒(méi)有斷掉的定時(shí)發(fā)送幾次心跳包，如果間隔發(fā)送幾次，對(duì)方都返回的是RST，而不是ACK，那么就釋放當(dāng)前鏈接。設(shè)想一下，如果tcp層沒(méi)有keepalive的機(jī)制，一旦一方斷開連接卻沒(méi)有發(fā)送FIN給另外一方的話，那么另外一方會(huì)一直以為這個(gè)連接還是存活的，幾天，幾月。那么這對(duì)服務(wù)器資源的影響是很大的。

• HTTP的keep-alive一般我們都會(huì)帶上中間的橫杠，普通的http連接是客戶端連接上服務(wù)端，然后結(jié)束請(qǐng)求后，由客戶端或者服務(wù)端進(jìn)行http連接的關(guān)閉。下次再發(fā)送請(qǐng)求的時(shí)候，客戶端再發(fā)起一個(gè)連接，傳送數(shù)據(jù)，關(guān)閉連接。這么個(gè)流程反復(fù)。但是一旦客戶端發(fā)送connection:keep-alive頭給服務(wù)端，且服務(wù)端也接受這個(gè)keep-alive的話，兩邊對(duì)上暗號(hào)，這個(gè)連接就可以復(fù)用了，一個(gè)http處理完之后，另外一個(gè)http數(shù)據(jù)直接從這個(gè)連接走了。減少新建和斷開TCP連接的消耗。

二者的作用簡(jiǎn)單來(lái)說(shuō)：

HTTP協(xié)議的Keep-Alive意圖在于短時(shí)間內(nèi)連接復(fù)用，希望可以短時(shí)間內(nèi)在同一個(gè)連接上進(jìn)行多次請(qǐng)求/響應(yīng)。

TCP的KeepAlive機(jī)制意圖在于?；睢⑿奶?，檢測(cè)連接錯(cuò)誤。當(dāng)一個(gè)TCP連接兩端長(zhǎng)時(shí)間沒(méi)有數(shù)據(jù)傳輸時(shí)(通常默認(rèn)配置是2小時(shí))，發(fā)送keepalive探針，探測(cè)鏈接是否存活。

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

tcp的keepalive是在ESTABLISH狀態(tài)的時(shí)候，雙方如何檢測(cè)連接的可用行。而http的keep-alive說(shuō)的是如何避免進(jìn)行重復(fù)的TCP三次握手和四次揮手的環(huán)節(jié)。

正文開始。

vue可以通過(guò)<keep-alive>元素包裹組件，實(shí)現(xiàn)緩存，下次使用時(shí)不需要重新創(chuàng)建該組件。但存在一個(gè)問(wèn)題：keep-alive包裹的組件中有滾動(dòng)元素時(shí)，keep-alive不會(huì)儲(chǔ)存滾動(dòng)位置。

實(shí)現(xiàn)后退不刷新主要依據(jù)keep-alive組件的activated和deactivated這兩個(gè)生命周期鉤子函數(shù)。

vue鉤子函數(shù)的執(zhí)行順序:

不使用keep-alive

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

使用keep-alive

初次進(jìn)入頁(yè)面，beforeRouteEnter --> created --> mounted --> activated --> deactivated

再次進(jìn)入緩存的頁(yè)面，只會(huì)觸發(fā)beforeRouteEnter -->activated --> deactivated。created和mounted不會(huì)再執(zhí)行。

其中，

activated在keep-alive組件激活時(shí)調(diào)用.

deactivated在keep-alive組件被停用時(shí)調(diào)用.

Demo 實(shí)現(xiàn)了后退不刷新，并且返回時(shí)滾動(dòng)到上次瀏覽的深度。

該demo中，包含三個(gè)鏈接導(dǎo)航。

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

依次前進(jìn)，每次前進(jìn)到一個(gè)新頁(yè)面都需要獲取數(shù)據(jù)，而按下后退鍵后，

從pageC返回到pageB，pageB不再獲取新數(shù)據(jù)，而是使用之前緩存的數(shù)據(jù)。

從pageB返回到pageA時(shí)，pageA不再獲取新數(shù)據(jù)，而是使用之前的數(shù)據(jù)。并且當(dāng)pageA存在滾動(dòng)條時(shí)，返回時(shí)會(huì)滾動(dòng)到上次瀏覽高度。

所以，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: '首頁(yè)',
  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">
  <h2>pageA</h2>
  <div>
   <div class="item" v-for="item in items" @click="goPageB">
    {{ item }}
   </div>
  </div>
  <h2 @click="goPageB">go pageB</h2>
 </div>
</template>

<script>
 export default {
  name: 'PageA',
  data() {
   return {
    msg: "我是PageA頁(yè)面",
    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指向組件的實(shí)例，$el指向當(dāng)前組件的DOM元素
   const $el = this.$el;
   //滾動(dòng)事件
   $el.addEventListener("scroll", () => {
    //記錄位置
    this.scrollTop = $el.scrollTop;
   });
  },
  activated() {
   if(!this.$route.meta.isBack){
    // 如果isBack是false，表明需要獲取新數(shù)據(jù)，否則就不再請(qǐng)求，直接使用緩存的數(shù)據(jù)
    this.getData();
   } else {
    //恢復(fù)滾動(dòng)條高度
    if(this.scrollTop) {
     setTimeout(() => {
      this.$el.scrollTop = this.scrollTop;
     }, 100);
    }
   }
   // 恢復(fù)成默認(rèn)的false，避免isBack一直是true
   this.$route.meta.isBack = false;

  },
  methods: {
   getData() {
    // getData方法，模擬從后臺(tái)請(qǐng)求數(shù)據(jù)
    this.data = "數(shù)據(jù)";
    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>

關(guān)于“Vue中keep-alive如何實(shí)現(xiàn)后退不刷新并保持滾動(dòng)位置”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)站標(biāo)題：Vue中keep-alive如何實(shí)現(xiàn)后退不刷新并保持滾動(dòng)位置
當(dāng)前路徑：http://www.rwnh.cn/article48/ihjpep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、虛擬主機(jī)、品牌網(wǎng)站制作、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)

廣告

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