❶ vue頁面緩存，keep-alive第一次無效的解決方法
方法二：使用 include + beforeRouteLeave + vuex 與方法一相似，不同的地方在於，將需要緩存的組件保存到全局變數，可以在路由的鉤子函數里靈活的控制哪些組件需要緩存，那些不需要緩存；跟方法一相比，不需要每次再重新初始化數據，但是需要在vuex中保存數據；
1、在創建router實例的時候加上scrollBehavior方法
2、將需要緩存的組件加在include屬性里
3、在store里加入需要緩存的的組件的變數名，和相應的方法；
4、在beforeRouteLeave鉤子函數里控制需要緩存的組件
❷ 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 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鉤子在進入緩存頁面的時候通過通過判斷路由是否是來自詳情頁面，如果不是詳情頁，我們就刷新緩存，如果是詳情頁，就不做處理。 這樣就解決了，只要是路由進入過別的頁面(非詳情頁面)，我們就刷新緩存，這樣就不會出現二次進入的時候，顯示的是第一次的緩存狀態，同時從詳情頁返回後正常顯示緩存數據。
❹ keep健身可以緩存視頻嗎
加入訓練——點擊「開始第一次訓練」——進度條處顯示「正在載入視頻」——載入結束也就是緩存結束後沒網也能用了