緩存，不管是PC 端還是移動端，不可避免的問題。vue中有一個keepAlive,這個api 基本 能實現我們開發的一些需要。

一、簡單介紹下keep-alive:

1、把切換出去的組件保留在內存中，可以保留它的狀態或避免重新渲染，實現頁面緩存；

2、<keep-alive>是抽象組件，它自身不會渲染DOM元素，也不會出現在父組件鏈中。

3、當組件在<keep-alive>內被切換，它的actived 和 deactived 這兩個生命周期鉤子函數將會被對應執行。（這個基本沒什麽）

註：在2.2.0及其更高版本中，activated 和 deactivated 將會在<keep-alive>樹內的所有嵌套組件中觸發。

二、常規的使用

1、部分頁面緩存

註意：其中transition 直接包在這兩個外面 會報錯；直接用transition-group也會報錯，需要用兩個transition。

2、個別頁面不緩存

其中"hom"是vue組件中export default 中的name:‘home‘。

多個頁面的時候可以這麽寫：

3、關於在beforeRouteLeave或者afterEach中進行攔截處理

經過代碼實驗，貌似起不了作用。一般用watch 代替

關於不起作用的原因：

vue的緩存機制