vue實時緩存視頻數據
① vue頁面緩存，keep-alive第一次無效的解決方法
方法二：使用 include + beforeRouteLeave + vuex 與方法一相似，不同的地方在於，將需要緩存的組件保存到全局變數，可以在路由的鉤子函數里靈活的控制哪些組件需要緩存，那些不需要緩存；跟方法一相比，不需要每次再重新初始化數據，但是需要在vuex中保存數據；
1、在創建router實例的時候加上scrollBehavior方法
2、將需要緩存的組件加在include屬性里
3、在store里加入需要緩存的的組件的變數名，和相應的方法；
4、在beforeRouteLeave鉤子函數里控制需要緩存的組件
② vue頁面緩存設置，動態設置頁面緩存
情景：A頁面—>B頁面—>C頁面，A頁面去B頁面期望B頁面不緩存，B頁面去C頁面時，期望B頁面可以被緩存。（實際場景可以是：A為首頁，B為列表頁，C為詳情頁，B滾動翻頁後，從C返回B，記錄滾動位置。）
通過路由訪問鉤子設置B頁面的keepAlive為true或者false。
離開路由後，判斷to.name是否是A的路由名，是的話設置為false,否則設置為true。注意B頁面的keepAlive要設置為true。
2.通過vuex結合路由的includes功能以及路由鉤子函數實現。（推薦，實現起來優雅）
3.聲明一個初始化頁面狀態，內部變數的函數，從a 頁面進入執行初始化函數，其餘情況不執行。視圖依賴數據驅動，所以可以實現效果。
③ vue頁面緩存（keepAlive）
同人博客搬遷~~~~（播客主頁： https://www.cnblogs.com/epines/ ）
頁面緩存在頁面中長期會使用到，可以更快速的在頁面切換期間的資源獲取
主要是用keep-alive實現
在vue項目中，相關的寫法比較多，還有一些注意點需要仔細
第一種方式
在App.vue中
添加標簽
<keep-alive>
<router-view />
</keep-alive>
這會就是所有的頁面都會被緩存
這里做了兩個頁面的相互跳轉，分別寫了一個輸入框，在輸入內容後，跳轉時，輸入的內容因為緩存的原因會被保留
如果存在某些頁面需要緩存，那麼可以通過keep-alive的屬性去處理
其中就是include和exclude
include：名稱匹配的組件才會被緩存，其中可以寫字元串或正則表達式
exclude：名稱匹配的組件不會被緩存，其中同樣是字元串或正則表達式
這里的名稱是指組件的名稱
<script>
export default {
name: 'HelloWorld'
}
</script>
第二種方式：
在路由中進行設置通過添加meta，route/index.js
export default new Router({
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
meta: {
keepAlive: true // 該路由會被緩存
}
},
{
path: '/ss',
name: 'ss',
component: Ss,
meta: { keepAlive:false // 該路由不會被緩存，不需要緩存的時候該屬性可以不用寫 }
}]
})
這時候頁面還需要通過該屬性進行判斷是否緩存
在App.vue
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
</router-view>
這樣寫有個優點就是，需要緩存不需要緩存的name可以隨便寫，不需要做什麼規律性的去寫出一個合適的正則去匹配上，就會更加靈活些
常見的應用場景可以是，列表到詳情頁，從詳情頁返回到列表頁，如果說列表頁沒有做緩存，在單頁面下，會直接返回列表首頁（存在分頁的情況），就不能直接返回至之前離開的列表頁，所以這個地方在列表頁添加頁面緩存後，可以做到返回至之前離開的列表頁
沒有緩存的時候，返回列表：
有緩存的時候，返回列表
所以從某些程度上來講，即增加了頁面的響應速度，又增加了用戶體驗，總體來說，還是比較實用的
④ vue項目數據本地存儲
緩存存入：
localStorage.setItem("token", this.token);
localStorage.setItem('formValidate', JSON.stringify(this.formValidate)) （對象）
緩存取出：
this.token=localStorage.getItem("token");
var object = JSON.parse(localStorage.getItem('formValidate')) （對象）
緩存情空：
localStorage.setItem("token", this.token);
window.localStorage.clear()
⑤ 解決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中如何緩存頁面
在Vue中經常會遇到需要緩存頁面的情況，如果不對Vue進行處理，那麼Vue默認是不會緩存頁面的。例如從菜譜列表界面進入到菜譜的詳情頁後，再從菜譜詳情頁中返回到菜譜列表頁面中時，菜譜列表是不需要進行刷新的，一個是增加了不必要的網路請求，第二個是如推薦菜譜後台是實時推薦的，每次請求的數據都不一定一樣的，這樣在用戶退出後甚至找不到之前的進入位置，造成了很不好的用戶體驗。類似的情況還有很多，那麼如何在Vue中控制頁面是否刷新呢？
設置方法
注意：以上兩種方法都可以對路由是否緩存進行設置，如果不論何種情況下都要緩存頁面，可以直接採用第一種方法，當然第二種情況同樣可以滿足情況；但是如果需要區分從不同頁面跳轉的情況來確定是否需要緩存的話，就需要用到第二種方法。