vue中 keep alive 元件的作用

2022-06-23 21:09:10 字數 722 閱讀 3873

在vue專案中,難免會有列表頁面或者搜尋結果列表頁面,點選某個結果之後,返回回來時,如果不對結果頁面進行快取,那麼返回列表頁面的時候會回到初始狀態,但是我們想要的結果是返回時這個頁面還是之前搜尋的結果列表,這時候就需要用到vue的keep-alive技術了.

keep-alive是 vue 內建的一個元件,可以使被包含的元件保留狀態,或避免重新渲染。

用法也很簡單:

props

// 元件 a

export default

}}

可以保留它的狀態或避免重新渲染

可以保留它的狀態或避免重新渲染

但實際專案中,需要配合vue-router共同使用.

router-view也是一個元件,如果直接被包在keep-alive裡面,所有路徑匹配到的檢視元件都會被快取:

如果只想router-view裡面某個元件被快取,怎麼辦?

增加 router.meta 屬性

// routes 配置

export default [

}, }]

Vue 中的keep alive 什麼用處?

keep alive keep alive是vue提供的一個抽象元件,用來對元件進行快取,從而節省效能,由於是一個抽象元件,所以在v頁面渲染完畢後不會被渲染成一個dom元素 當元件在keep alive內被切換時元件的activated deactivated這兩個生命週期鉤子函式會被執行 被包裹在...

vue的keep alive缺陷提問?

請問,當有頁面需要快取時,如何實現? 例如 a是首頁,b是列表頁,c是詳情頁 a b,b c 頁面被快取 ,c b,頁面展示的是b頁面之前狀...

vue路由在keep alive下的重新整理問題

問題描述 在keep alive中的在跳轉到指定的路由時重新整理對應的路由,其餘不重新整理。 有幾種解決方式 1 在keep alive中直...