Vue中keep-alive的使用我總結的有兩種方式應用：

首先簡述一下keep-alive的作用，kee-alive可以快取不活動的的元件。當元件之間進行相互切換的時候，預設會銷燬，當重新切換回來時又重新初始化。現在有需求切換回來不銷燬元件，保持原來的狀態，此時用keep-alive就可以實現了

我建立了兩個元件，可以相互切換

元件1：

元件2：

第一種方式

在元件1的路由中新增 meta: { keepAlive: true },也就是當前路由需要快取

此時路由設定完畢，keep-alive程式碼可以結合v-if進行包裹，如果meta中的keepAlive為true進行快取，否側不進行快取，這樣可以更靈活一些。

此時元件被快取，不會銷燬，所以切換不會重新建立，自然也不會呼叫create等生命週期函式。不過我們可以用activated與deactivated來獲取當前元件是否處於活動狀態（類似鉤子函式的用法）。

第二種方式

在keep-alive上有兩個屬性：

通過include設定

此時，也可以達到快取keepAlive元件的目的。

以上是我初步總結的keep-alive的實現用法，不正之處煩請諸位指正。

到此這篇關於Vue中keep-alive的兩種應用方式的文章就介紹到這了,更多相關Vue keep-alive內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！