『壹』 vue中tab標簽頁keep-alive二級路由+刪除指定緩存頁面
include 和 exclude prop 允許組件有條件地緩存。二者都可以用逗號分隔字元串、正則表達式或一個數組來表示：
匹配首先檢查組件自身的 name 選項，如果 name 選項不可用，則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)。匿名組件不能被匹配。
為每個頁面設置不重復的name欄位，當點擊菜單欄的時候，將點擊的組件的name值存入catch_components中，當點擊關閉標簽時，刪除該項。
無需設置頁面的name欄位，當點擊菜單欄的時候，將點擊的組件的路徑值存入catch_components中，當關閉按鈕時候，刪除該路徑，並找到當前已緩存的cache和keys，暴力刪除該緩存頁面。
如何拿到當前已緩存的cache和keys
『貳』 解決vue keepAlive 二次進入頁面顯示首次緩存問題
問題場景： 當某個帶有篩選條件查詢列表的頁面需要進行緩存，以便不再需要重復進行選擇或者輸入篩選條件的時候，我們就可以利用keepAlive來進行緩存，但keepAlive也存在著一些坑，這是需要注意的地方。
如何利用keepAlive進行緩存
1、在路由meta內定義keepAlive，來設置需要被緩存的頁面
meta: { keepAlive: true }
ture: 需要緩存的路由；false:不需要緩存的路由
2、判斷router-view
被keep-alive包裹的為需要緩存的頁面，這樣我們就可以通過keepAlive來切換哪些頁面需要緩存，哪些不需要緩存。
3、進入詳情頁面緩存，否則不緩存
路由守衛鉤子 beforeRouteLeave 離開頁面路由的時候出發； 當離開緩存頁面，進入詳情頁面的時候，我們將緩存頁面keepAlive設置true，如果離開緩存頁面，不是進入詳情頁面的時候，我們設置為false，不進行緩存。
這是最基本的緩存設置，但是keepAlive也留下了一個大坑。
keepAlive二次進入頁面顯示首次緩存問題
第一次從緩存頁面進入詳情頁再返回到緩存頁面的時候，頁面條件能被正確的緩存下來，但是當我們切換到別的路由，再一次進入該緩存頁修改查詢條件，並進入詳情後返回緩存頁，此時緩存的是頁面狀態是第一次進入該頁面的時候的狀態，也就是說，第二次進入頁面的時候，該緩存讀取的是第一次的緩存，這就非常的坑了。 所以通過下面的刷新緩存路由的方式來解決這個問題。
1、調整 router-view
定義一個isRouterAlive變數，用來刷新keep-alive;通過provide向下面子孫組件們暴露一個reload方法，用來刷新緩存。
2、設置緩存
子組件注冊inject: ['reload'] 方法，beforeRouteEnter鉤子在進入緩存頁面的時候通過通過判斷路由是否是來自詳情頁面，如果不是詳情頁，我們就刷新緩存，如果是詳情頁，就不做處理。 這樣就解決了，只要是路由進入過別的頁面(非詳情頁面)，我們就刷新緩存，這樣就不會出現二次進入的時候，顯示的是第一次的緩存狀態，同時從詳情頁返回後正常顯示緩存數據。
『叄』 Vue keep-alive本地路由緩存和圖片懶載入
keep-alive用來緩存組件,避免了每次點擊其他頁面都要載入,減少性能消耗和提高用戶體驗，下圖緩存整個路由視圖(所有頁面)，也可以緩存單個組件
圖片懶載入用了 vue-lazyload 組件，npm安裝：npm i vue-lazyload -S
我是全局引用的，所以在main.js里引用 vue-lazyload
之後在需要懶載入的圖片上把src換成v-lazy
效果如圖
當訪問一個頁面的時候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需請求一次，俗稱占點陣圖），只有當圖片出現在瀏覽器的可視區域內時，才設置圖片正真的路徑，讓圖片顯示出來。這就是圖片懶載入，因為很多頁面，內容很豐富，頁面很長，圖片較多。比如說各種商城頁面。這些頁面圖片數量多，而且比較大，少說百來K，多則上兆。要是頁面載入就一次性載入完畢。估計大家都會等到黃花變成黃花菜了。當用戶網速慢時，可以先顯示一張loading的動態圖，預先讓用戶有心理准備，否則打開後一片空白會使得用戶體驗變差。
『肆』 vue keep-alive 不生效和多級（三級以上）緩存失敗
https://cn.vuejs.org/v2/api/#keep-alive
如果安裝官方的寫法，已經正常完成keep-alive
請檢查需要router 界面當前引入組件是否有name 屬性, 下面Demo 的 Menu1
如果存在並被keep-alive的 include緩存['Menu1']，並且還沒有生效
找到這個組件，看是否存在name
這個name 不存在，會導致找不到
當存在三級路由，會發現設置都沒有問題，但就是不能解決問題，三級路由的界面無法緩存，據說是官方的原因，直接放三級路由是無法被keep-alive 執行生效，解決方案就是，把二級的路由name 和三級路由name 一塊 放到include 內。
如果緩存的界面是 name為 Menu 1-2-1的界面， 需要緩存上一級路由name： 『Menu1-2』 即可以解決三級路由失敗，如果是更多級（三級以上）的，也可以重復以上操作（具體沒有試過）
關於 怎麼取到到父級路由的name, 可以通過vue router的 matched 屬性獲取，關於include數組具體的處理方式，看個人喜好了。
https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7
如果文章內存在問題，可以聯系作者哦
『伍』 vue中動態路由組件緩存及生命周期函數
<keep-alive>是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM。<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中。prop :
有兩個生命周期函數：
activated ：激活
deactivated ：失活
利用keep-alive實現滾動條保存：
思路 ： 在路由頁面離開 beforeRouterEnter 中保存當前滾動條距離頂部的位置，再用 activated 鉤子函數 當他再次被激活時，讓他的滾動條等於離開時保存的那個值。
beforeCreate ：組件實例剛被創建，組件屬性計算之前，如data屬性等
created ：組件實例創建完成，屬性已綁定，但DOM還未生成，$el屬性還不存在
beforeMount ：模板編譯 / 掛載之前
mounted ：模板編譯 / 掛載之後
beforeUpdate ：組件更新之前
updated ：組件更新之後
activated ：組件被激活時調用
deactivated ：組件被移除時調用
beforeDestory ：組件銷毀前調用
destoryed ：組件銷毀後調用
(1) 創建階段
創建的標志點是New vue()，beforeCreate和created都發生在創建動作之後，但區別在於beforeCreate觸發的時候數據還沒初始化和綁定，而created的時候就生成好了。
(2) 掛載階段
beforeMount和mounted兩者主要區別在於模板是否編譯和掛載了。
(3) 更新階段
beforeUpdate 和 updated 就是當數據發生變化的時候出發的。
(4) 銷毀階段
beforeDestory 和 destoryed 的區別就是el的值data的數據依然在的。這是因為$destroy只是銷毀一個實例，清理它與其它實例的連接，解綁它的全部指令及事件監聽器，並不會清除data的數據或者清除dom。
『陸』 vue路由緩存了為什麼還會執行created
設置。在vue路由設置了緩存完繼續執行，就會出現vue路由緩存了會執行created，正常關閉即可。vue中的路由是在找到目的地。
『柒』 Vue組件傳值及頁面緩存問題
關於父組件的傳值類型和props更多的定義詳見官網 ： vue官網
（2）子組件向父組件傳值
（3）通過 chlidren等方法調取用層級關系的組件內的數據和方法。
有很多時候根據業務需求要在同級組件或頁面間傳值，此處提供以下幾種方法作為參考:
（1）通過router-link進行跳轉
（2） this.$router.push()
此方法同樣是有path+query和name+params兩種方式：
總結：使用query，傳輸的值會在url後面以參數的形式顯示出來，可以刷新頁面，數據不變，但會是頁面路由過長；而params只要一刷新傳遞的參數就沒了。
（3）LocalStorage緩存傳值
注意：簡單的小項目可以這么做，如果項目很大，建議直接用vuex。
（4）通過Vuex進行傳值
（5）發布訂閱模式（也叫eventBus或事件匯流排）
在Vue的原型上定義一個變數eventBus，所有所有Vue的實例或組件都將共享這個eventBus，可以用eventBus來發布自定義事件，然後在組件中用eventBus訂閱自定義事件。就可以實現傳值。
詳細講解可看 鏈接
（6）Vue.observable
index.vue組件中觸發：
Vue中如何在切換組件過程中，將狀態保存到內存中，防止DOM重新渲染，通俗的講就是實現如何在一個頁面輸入部分數據後到了另一個頁面再返回該頁面，數據還在。
需求分析：Page1中錄入信息，頁面跳轉帶Page2，然後再返回Page1，之前Page1錄入的信息還存在。
現在更改需求為：
首頁是A頁面
A頁面跳轉到B，B頁面不需要緩存
B頁面跳轉到C，C頁面不需要被緩存
C頁面返回到B，B頁面需要緩存
B頁面返回到A，
A再次跳轉到B
（1）此時思路是在每個路由的beforeRouteLeave(to, from, next)鉤子中設置to.meta.keepAlive
beforeRouteLeave講解
PageA頁面：
PageB頁面：
（2）用eventBus解決此問題
需要注意的一點是發布訂閱第一次會無效，因為訂閱的組件還沒創建。解決方法就是首次進入pageB頁面時接收pageA頁面params里傳遞的參數。
『捌』 vue 路由緩存
在寫一個移動端項目時遇到了一個問題，每一個tab欄所對應的頁面被封裝成一個組件進行
復用，結果會導致他們共用一個滾動條。解決辦法是給這個子組件加固定的高度（例如
height:100vh），同時加一個屬性overflow-y:auto，這樣就可以解決這個問題。之後發現每當進
入主頁中任意一篇文章再退出時，頁面重新載入渲染了，之前的文章消失了，所有在這里想到
了路由緩存。
先說一下keep-alive的屬性和用法。
Props ：
用法 ：
<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。
<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在組件的父組件鏈中。
當組件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命周期鉤子函數將會被對應執行。
（只有被<keep-alive>包裹的組件才具有這兩個鉤子函數）
其實不太建議使用include的，因為如果多個組件中都包括include中匹配到的組件，想單獨
的讓其中某個組件緩存是不太方便的。所以可以在分發路由時，在需要緩存的路由中把額外標
記的屬性寫在meta中，如圖1。
使用的時候可以在根組件中通過$route.meta.keepAlive取到該值，然後進行v-if判斷即可，如圖
2，這樣使用起來相對靈活一點。
使用keep-alive緩存路由後，已經解決了主要問題，但是有新的問題出現。緩存過的組件重
新被激活時不會記錄滾動條的狀態，默認置頂，所以應該監聽這個被復用的組件的onscroll事
件，動態記錄滾動條的位置狀態，然後重新賦值給scrollTop（如果還想優化最好給滾動事件來
一個防抖處理）。那麼問題來了，應該在何時重新賦值呢？上面用法中提到了當組件在<keep-
alive> 內被切換時會觸發activated這個鉤子函數，所以應在這里賦值。
『玖』 vue element admin 三級路由緩存問題的解決辦法
三級 路由緩存一直是很讓人頭疼的問題 , 經過多次測試 app-main 里邊的router-view 的key去掉,這樣所有組件可以共用一個parent-view
這是 parent-view.vue
去掉 router-view 的key 之後 點開 vue 調試工具看效果
如果 不去掉 key 那麼 會多開 虛擬dom 導致三級路由無法共用 一個 parent-view 效果 如下
附上 路由表
『拾』 VUE 動態移除緩存路由
在緩存路由時，有時候需要將緩存的路由清除掉達到刷新頁面數據的效果。方法如下：