Vue利用keep alive實現頁面快取

2021-08-28 10:00:20 字數 755 閱讀 9890

做列表快取的時候,受益於@ vonvon_chris 這篇文章

實現了返回不重新整理頁面,當需要區域性重新整理的時候,使用activated的生命週期

activated,deactivated這兩個生命週期函式一定是要在使用了keep-alive元件後才會有的,否則則不存在 。

使用中遇到的問題

1、因列表頁滑動一定距離,進入詳情頁的時候,會造成詳情頁有移動距離,可能跟我的布局有關。

解決辦法:

mounted() 

//在mounted中獲取引數時,為防止保錯,我們應處理一下this.$route.query。

let id = (this.$route.query || {}).id;

.....do something

}

2、若有需求在返回後,停留在以前的位置,需要設定 router為history模式並新增函式如下:

export default new router(else 

return }},

routes: [

},]})

3、快取頁分享:

在活動詳情頁請求完資料,可以初始化分享標題,和文案等,但是,使用者返回的別的頁面的時候,分享文案還在這個頁面的

1、在沒有快取的時候,可以在beforedestroy()生命週期,進行初始化通用分享。

2、在設有快取的時候,需要在deactivated()生命週期(快取不活動的狀態),初始化通用分享。

vue頁面利用keep alive實現頁面快速快取

需求 vue切換頁面時,保留原頁面表單資料,實現快速快取,便於下次利用 方法 基於vue的內建元件keep alive 文件 官方說明 包裹動態元件時,會快取不活動的元件例項,而不是銷毀它們。和 相似,是乙個抽象元件 它自身不會渲染乙個 dom 元素,也不會出現在父元件鏈中。當元件在 內被切換,它的...

利用Vue中keep alive,快速實現頁面快取

2.在路由中設定keepalive meta 3.更改 beforeeach鉤子 這一步是為了清空無用的頁面快取。假設現在a b兩個頁面都開啟的快取 若第一次進入a頁面後退出,再次進入頁面時,頁面不會重新整理。這和目前的業務邏輯不符。我們想要的結果是a頁面前進後返回,頁面保持不變,而不是退出後重新進...

vue快取機制 keep alive

到現在,接觸vue也小段時間了,專案進行到了一定程度,然而專案缺少了快取機制,所以每次跳轉頁面都會重新created一下資料,雖說系統的資料請求速度很快,但是這樣做對系統的效能會有很大的壞處的,所以到這裡就要對系統優化下,新增快取了。其實到現在,對於vue還是沒有玩通,每深挖一次,就會發現一次vue...