keep-alive實(shí)現(xiàn)路由緩存

在寫一個移動端項(xiàng)目時遇到了一個問題，每一個tab欄所對應(yīng)的頁面被封裝成一個組件進(jìn)行

復(fù)用，結(jié)果會導(dǎo)致他們共用一個滾動條。解決辦法是給這個子組件加固定的高度（例如

height:100vh），同時加一個屬性overflow-y:auto，這樣就可以解決這個問題。之后發(fā)現(xiàn)每當(dāng)進(jìn)

入主頁中任意一篇文章再退出時，頁面重新加載渲染了，之前的文章消失了，所有在這里想到

了路由緩存。

先說一下keep-alive的屬性和用法。

Props：

    include - 字符串或正則表達(dá)式。只有名稱匹配的組件會被緩存。

    exclude - 字符串或正則表達(dá)式。任何名稱匹配的組件都不會被緩存。

    max - 數(shù)字。最多可以緩存多少組件實(shí)例。超出的會進(jìn)行緩存，最前面緩存的會重新加載。

用法：

<keep-alive> 包裹動態(tài)組件時，會緩存不活動的組件實(shí)例，而不是銷毀它們。

<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現(xiàn)在組件的父組件鏈中。

當(dāng)組件在 <keep-alive> 內(nèi)被切換，它的 activated 和 deactivated 這兩個生命周期鉤子函數(shù)將會被對應(yīng)執(zhí)行。

（只有被<keep-alive>包裹的組件才具有這兩個鉤子函數(shù)）

其實(shí)不太建議使用include的，因?yàn)槿绻鄠€組件中都包括include中匹配到的組件，想單獨(dú)

的讓其中某個組件緩存是不太方便的。所以可以在分發(fā)路由時，在需要緩存的路由中把額外標(biāo)

記的屬性寫在meta中，如圖1。

image

使用的時候可以在根組件中通過$route.meta.keepAlive取到該值，然后進(jìn)行v-if判斷即可，如圖

2，這樣使用起來相對靈活一點(diǎn)。

image

使用keep-alive緩存路由后，已經(jīng)解決了主要問題，但是有新的問題出現(xiàn)。緩存過的組件重

新被激活時不會記錄滾動條的狀態(tài)，默認(rèn)置頂，所以應(yīng)該監(jiān)聽這個被復(fù)用的組件的onscroll事

件，動態(tài)記錄滾動條的位置狀態(tài)，然后重新賦值給scrollTop（如果還想優(yōu)化最好給滾動事件來

一個防抖處理）。那么問題來了，應(yīng)該在何時重新賦值呢？上面用法中提到了當(dāng)組件在<keep-

alive> 內(nèi)被切換時會觸發(fā)activated這個鉤子函數(shù)，所以應(yīng)在這里賦值。