keepAlive使用方法

2021-09-25 14:33:35 字數 1349 閱讀 9017

注: 此處的重新整理特指當進入此頁面時,觸發ajax請求,向伺服器獲取資料。不重新整理特指當進入此頁面時,不觸發ajax請求,而是使用之前快取的資料,以便減少伺服器請求,使用者體驗更流暢。

>

v-if

="$route.meta.keepalive"

>

router-view

>

keep-alive

>

v-if

="!$route.meta.keepalive"

>

router-view

>

2.在router/index.js中新增路由元資訊,設定需要快取的頁面
routes:[}

,},}

,}]

3.beforerouteenter中判斷是從哪個頁面過來的
判斷是從哪個路由過來的,如果是page2過來的,表明當前頁面不需要重新整理獲取新資料,直接用之前快取的資料即可

beforerouteenter

(to,

from

, next)

next()

;},

鉤子函式的執行順序
beforerouteenter --> created --> mounted --> destroyed

beforerouteenter --> created --> mounted --> activated --> deactivated

再次進入快取的頁面,只會觸發beforerouteenter -->activated --> deactivated 。created和mounted不會再執行。我們可以利用不同的鉤子函式,做不同的事。務必理解上述鉤子函式的執行時機和執行順序,本教程的核心就依賴於此鉤子函式

activated和deactivated是使用keep-alive後,vue中比較重要的兩個鉤子函式,建議詳細了解下。

4.activated中執行getdata這個獲取資料的方法

因為這個頁面需要快取。只有第一次進入時才會執行created和mounted方法,再次進入就不執行了。而activated每次進入都執行,所以在這個鉤子函式中獲取資料。

activated()

// 恢復成預設的false,避免isback一直是true,導致下次無法獲取資料

this

.$route.meta.isback=

false

}

參考鏈結

keep alive 的實現原理和使用方法

export default created destroyed mounted this.watch exclude val render this if not included include name matches include,name excluded exclude name ma...

pythonpip使用方法 pip使用方法整理

匯出專案已安裝的pip包 pip list 檢視專案中安裝的包 pip freeze requirements.txt 將專案中所用到的第三方庫輸出到requirements.txt中 pip install 版本號 pip install i 本次使用清華源進行安裝 離線安裝第三方庫 一鍵安裝整個...

使用方法 離型劑使用方法

1 使用離型劑前必須確保模具乾淨,無粉塵 蠟垢 樹脂垢 油汙等殘留物質。可以使用專用的模具潔模劑進行清洗,不可用其他液體清洗,以免清洗不乾淨或損壞模具。另外,如果您的模具是新的,在清洗乾淨後,務必要對模具進行初步處理,用離型劑在模具表面噴 刷塗5 6次,之後方可正常投入生產。2 使用離型劑時,首先要...