? ? ? ?Vue-router的API文檔中對于keep-alive的介紹并不多，所以對于初學者來說，可能并不太理解什么是keep-alive、作用是什么，什么時候用，怎么用？所以，通過這篇文章，我為大家詳細講解一下這四個問題。如有錯誤，還請大家指正，謝謝！

1、什么是keep-alive

? ? ? ?keep-alive用來緩存組件,避免多次加載相應的組件,減少性能消耗，簡單一點來說就是從頁面1鏈接到其他頁面后回退到頁面1不用在重新執行頁面1的代碼，只會從緩存中加載之前已經緩存的頁面1，這樣可以減少加載時間及性能消耗，提高用戶體驗性。

2、keep-alive的作用是什么

? ? ? ?通過設置了keep-alive，可以簡單理解為從頁面1跳轉到頁面2后，然后后退到頁面1，只會加載緩存中之前已經渲染好的頁面1，而不會再次重新加載頁面1，及不會再觸發頁面一種的created等類似的鉤子函數，除非自己重新刷新該頁面1。

例如我的頁面1有如下代碼，該代碼具體作用是每請求一次頁面1，會獲取一些數據追加到原來的數組里，然后再渲染該數組中的數據

沒使用keep-alive的清況：

剛開始頁面1只有2個數據，如圖一，當鏈接到頁面2后再回退到頁面1是會出現圖二的情況，因為回退到頁面1后會重新觸發上面的代碼，追加了2個數據，所以才會出現圖二4個數據的情況。當再次鏈接到頁面2后再回退到頁面1是會出現圖三的情況

圖一

圖二

圖三

當使用了keep-alive后，無論從頁面1鏈接到其他頁面再回退到頁面1多少次，頁面1還是只有2個數據，因為并沒有再次觸發created鉤子函數，只會從緩存中加載頁面1，這就是keep-alive的作用之處。

如果需要頻繁切換路由，這個時候就可以考慮用keep-alive了，來達到避免數據的重復請求的目的。

<keep-alive>

? ? ? ? ? ? <router-view> </router-view>

</keep-alive>

將首次觸發請求寫在created鉤子函數中,就能實現緩存,

如果你需要緩存部分頁面或者組件，可以使用如下方法：

(1)、使用router. meta屬性

? ? ? ? ? ?表示test1都使用keep-alive，test2不使用

(2)、使用新增屬性inlcude/exclude

同時必須在test1組件js部分添加name: 'test1'

表示除了test1，其他都使用keep-alive

其中，也可動態設置，如下圖

這個時候只要動態改變Components就可以設置哪個組件不使用keep-alive。

好了，關于keep-alive的介紹就到這里，真心希望此文章對你有幫助，如果此文章有錯誤，還請大家指正，謝謝！