vue禁止頁面緩存

Ⅰ 移動端Vue界面緩存處理

大家可以桐毀攔看到當重新進入列表頁數據進行了刷新這明顯不符合需求

查網路問同事知道了一個東西叫keep-alive於是決定使用這個內置組件試試.

然後吧發現問題確實能夠得到結局但是出了個新問題如圖:

問題1:界面雖然被緩存但是當退出到前一個頁面再進入的時候界面還是被緩存狀態,我覺得這是不合理的.
問題2:被緩存的界面從上個頁面再次進入時動畫效果不對.

基於這兩個問題我也查了一些資料和博客,也總結了第二套方案

這個rank是用來判斷當前組件所在的級別.
比如A組件->B組件 ->C組件,那麼A的rank為1,B的rank為2,C的rank為3,
在beforeRouteLeave中

這個貌似能解決問題,但是!!!
問題1: 這個返回動畫就是不對...(圖片在瀏覽器可能看不出啥問題,在真機很明顯)因為這個框架是前端給的動畫我也不會弄...如果能解決跳轉動畫問題,我覺得這個方案基本可以符合要求..如果有大佬可以解決,方便的話指導下小弟.而且能解決這個動畫問題後面也不用看了...
問題二:有的時候會出現緩存了上一次的bug(也不知道咋回事...出現的還挺頻繁..).

在這里就是我自己總結的一個方案..雖然能完美解決這些問題不過對開發不友好,維護成本太高..不建議使用(如果實在沒辦法的話)

首先在vuex中定義需要緩存的界面的數據(先測試的滑動,所以分開寫的可以只寫一個data)

先說下高度的滑動吧這個滑動的高度也是需要保存的.界面中沃使用cube-ui的scroll組件

給data增加一個scrollHeight屬性緩存界面高度.還有需要緩存的數據model

當界面滑動停止調用scrollend方法對scrollHeight進行賦值

每次進入界面即在created 函數中取出緩存的高度,如果有高度那麼讓它自動滑動.並重新給scrollHeight進行賦值.

這邊是我封裝的一個js..實現是這樣的

這樣余並就可以局胡保證滑動的緩存(data與高度類似).
這是data的js

當界面進行跳轉對組件的rank進行判斷如下:

而在進入的時候

Ⅱ 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中如何緩存頁面

在Vue中經常會遇到需要緩存頁面的情況，如果不對Vue進行處理，那麼Vue默認是不會緩存頁面的。例如從菜譜列表界面進入到菜譜的詳情頁後，再從菜譜詳情頁中返回到菜譜列表頁面中時，菜譜列表是不需要進行刷新的，一個是增加了不必要的網路請求，第二個是如推薦菜譜後台是實時推薦的，每次請求的數據都不一定一樣的，這樣在用戶退出後甚至找不到之前的進入位置，造成了很不好的用戶體驗。類似的情況還有很多，那麼如何在Vue中控制頁面是否刷新呢？

設置方法

注意：以上兩種方法都可以對路由是否緩存進行設置，如果不論何種情況下都要緩存頁面，可以直接採用第一種方法，當然第二種情況同樣可以滿足情況；但是如果需要區分從不同頁面跳轉的情況來確定是否需要緩存的話，就需要用到第二種方法。