keep-alive是vue內置的一個組件，可以使被它包含的組件處于保留狀態，或避免被重新渲染。

用法:

運行結果描述：

input輸入框內，路由切換輸入框內部的內容不會發生改變。
在keep-alive標簽內部添加

include：字符串或正則表達式。只有匹配的組件會被緩存

exclude： 字符串或正則表達式。任何匹配的組件都不會被緩存。


結合router緩存部分頁面：

比較實用的例子：

思路：通過beforeRouterLeave這個鉤子來對路由里面的keepAlive進行賦值。從而動態的確定A頁面是否需要被緩存。

以上轉載自：https://blog.csdn.net/qq_38614249/article/details/79468609
【Vue】Vue2.0頁面緩存和不緩存的方法，以及watch監聽會遇到的問題vue2.0頁面
緩存和不緩存的方法：
1、在app中設置需要緩存的div

<keep-alive>//緩存的頁面<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>//不緩存的頁面

2、在路由router.js中設置.vue頁面是否需要緩存
{path: '/home',component: home,meta: { keepAlive: true },//當前的.vue文件需要緩存 }, { path: '/notice', component: notice,//當前頁面不需要緩存 }

3、從緩存頁面跳轉到不緩存頁面，或者從不緩存頁面跳轉到緩存頁面的時候，會發現watch是不能監聽路由的，是因為緩存和不緩存頁面分別在不同的div里面，一個div里面是不可能監聽到另一個div的路由的，所有需要把監聽的路由都加上緩存（在路由添加 meta: { keepAlive: true }），路由在緩存頁面之間進行跳轉的時候，就可以通過監聽路由來進行判斷數據是否需要更新。

vue中前進刷新、后退緩存用戶瀏覽數據和瀏覽位置的實踐
vue中，我們所要實現的一個場景就是：

1.搜索頁面==>到搜索結果頁時，搜索結果頁面要重新獲取數據，

2.搜索結果頁面==>點擊進入詳情頁==>從詳情頁返回列表頁時，要保存上次已經加載的數據和自動還原上次的瀏覽位置。

最近在項目中遇到這個問題，思考了幾套方案，總是不太完善。百度搜到的方案也基本都只能滿足一些很簡單的需求。對于復雜一些的情況，還是有些不完善的地方。以下是個人對于這種場景的一個摸索，也參考了百度。如有更好的方案，歡迎指出。

緩存組件，vue2中提供了keep-alive。首先在我們的app.vue中定義keep-alive:

<keep-alive>      <router-view v-if="$route.meta.keepAlive"/>    
</keep-alive>    
<router-view v-if="!$route.meta.keepAlive"/>

這里是根據路由中的meta源信息中的keepAlive字段來判斷當前路由組件是否需要緩存。這里的meta的keepAlive是我們自定義的，當然你也可以叫別的名字。

下面在router/index.js即我們的路由文件中，定義meta信息：

// list是我們的搜索結果頁面

{      path: '/list',  name: 'List',      component: resolve => require(['@/pages/list'], resolve), meta: { isUseCache: false, // 這個字段的意思稍后再說 keepAlive: true // 通過此字段判斷是否需要緩存當前組件 } },

上面的component: resolve => require(['@/pages/list'], resolve)這里的組件引入方式可能和大家平時寫的有些不一樣，這里是為了路由的懶加載用的，大家可以忽略。按照正常的import引入也可以，這個和本次的主題無關。如此一來，vue的路由會幫我們去緩存list頁面。

刷新數據or緩存數據的實現：
說這之前，先簡單說一下和緩存相關的vue鉤子函數。

設置了keepAlive緩存的組件：

   第一次進入：beforeRouterEnter ->created->…->activated->…->deactivated后續進入時：beforeRouterEnter ->activated->deactivated

可以看出，只有第一次進入該組件時，才會走created鉤子，而需要緩存的組件中activated是每次都會走的鉤子函數。所以，我們要在這個鉤子里面去判斷，當前組件是需要使用緩存的數據還是重新刷新獲取數據。思路有了，下面我們來實現：

// list組價的activated鉤子activated() {// isUseCache為false時才重新刷新獲取數據// 因為對list使用keep-alive來緩存組件，所以默認是會使用緩存數據的         if(!this.$route.meta.isUseCache){ this.list = []; // 清空原有數據 this.onLoad(); // 這是我們獲取數據的函數 } },

這里的isUseCache 其實就是我們用來判斷是否需要使用緩存數據的字段，我們在list的路由的meta中已經默認設置為false，所以第一次進入list時是獲取數據的。

當我們從詳情頁返回時，我們把list頁面路由的isUseCache設置成true，這樣我們在返回list頁面時會使用緩存數據：

// 詳情頁面的beforeRouteLeave鉤子函數
beforeRouteLeave (to, from, next) {        if (to.name == 'List') {to.meta.isUseCache = true; } next(); },

我們這里是在即將離開detail頁面前判斷是否返回的列表頁。如果是返回list頁面，則把list頁面路由的isUseCache字段設置成true。為什么這樣設置呢？因為我們對list組件使用的keep-alive進行緩存組件，其默認就是使用緩存的。而我們又在list組件的actived鉤子函數中進行了判斷：只有在list頁面的isUseCache==false時才會清空原有數據并重新獲取數據。所以此處設置isUseCache為true，此時返會list頁面是不會重新獲取數據的，而是使用的緩存數據。

detail返回list可以緩存數據了，那么search前往list頁面時怎么讓list頁面不使用緩存數據而是獲取新數據呢？我們重新回到list的activated鉤子中：

// list組價的activated鉤子activated() {// isUseCache為false時才重新刷新獲取數據// 因為對list使用keep-alive來緩存組件，所以默認是會使用緩存數據的         if(!this.$route.meta.isUseCache){ this.list = []; // 清空原有數據 this.onLoad(); // 這是我們獲取數據的函數 this.$route.meta.isUseCache = false; } },

我們加了一行this.$route.meta.isUseCache=false;也就是從detail返回list后，將list的isUseCache字段為false，而從detail返回list前，我們設置了list的isUseCache為true。所以，只有從detail返回list才使用緩存數據，而其他頁面進入list是重新刷新數據的。

至此，一個前進刷新、后退返回的功能基本完成了。

如果場景再復雜一丟丟，比如，如果這個詳情頁是個訂單詳情，那么在訂單詳情頁可能會有刪除訂單的操作。那么刪除訂單操作后會返回訂單列表頁，是需要列表頁重新刷新的。那么我們需要此時在訂單詳情頁進行是否要刷新的判斷。簡單改造一下詳情頁：

data () {    return {isDel: false  // 是否進行了刪除訂單的操作       }
},
beforeRouteLeave (to, from, next) { if (to.name == 'List') { // 根據是否刪除了訂單的狀態，進行判斷list是否需要使用緩存數據 to.meta.isUseCache = !this.isDel; } next(); }, methods: { deleteOrder () { // 這里是一些刪除訂單的操作 // 將狀態變為已刪除訂單 // 所以beforeRouteLeave鉤子中就會將list組件路由的isUseCache設置為false // 所以此時再返回list時，list是會重新刷新數據的 this.isDel = true; this.$router.go(-1) } }

至此，算是解決了我的vue項目中的這個前進刷新、后退緩存數據和瀏覽位置的問題。

最后再提一下，頁面滾動位置的問題。

問題1：我們知道，在vue這種單頁應用中，如果你在a頁面滾動了一段距離后，此時前往b頁面后，b頁面也會停留在a頁面的滾動位置。這個問題的解決，我們可以利用router本身提供的功能來解決：

routes: [    {      path: '/detail',      name: 'Detail',      component: resolve => require(['@/pages/detail'], resolve) } ], scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { if (from.meta.keepAlive) { from.meta.savedPosition = document.body.scrollTop; } return { x: 0, y: to.meta.savedPosition || 0 } } }

scrollBehavior是路由提供的基礎功能，這段函數寫的是：

1.如果通過瀏覽器自帶的前進后退按鈕切換的路由，那么會自動使用瀏覽默認的回滾上次頁面的瀏覽位置。

2.如果是通過vue路由進行的頁面切換。例如a前往b，首先判斷a是不是通過keep-alive緩存的組件，如果是，則在a路由的meta中添加一個savedPosition字段，并且值為a的滾動位置。最后return的是頁面需要回滾的位置。如此一來，如果打開一個頁面，該頁面的組件路由中meta.savedPosition為undefined的話，則頁面滾動到（0,0）的位置，這樣解決了問題1。那么如果打開一個頁面，它的路由的meta.savedPosition有值的話，則滾動到上次瀏覽的位置，因為meta.savedPosition保存的就是上次瀏覽的位置。
vue中,在本地緩存中讀寫數據的方法
1.安裝good-storage插件
cnpm i good-storage --save
2.讀/寫的方法

common/js/cache.js:
import storage from 'good-storage'const SEARCH_KEY = '__search__' const SEARCH_MAX_LENGTH = 15 // compare:findindex傳入的是function,所以不能直接傳val function insertArray(arr, val, compare, maxLen) { const index = arr.findIndex(compare) if (index === 0) { return } if (index > 0) { arr.splice(index, 1) } arr.unshift(val) // 插入到數組最前 if (maxLen && arr.length > maxLen) { arr.pop() // 刪除末位元素 } } // 存儲搜索歷史 export function saveSearch(query) { let searches = storage.get(SEARCH_KEY, []) insertArray(searches, query, (item) => { return item === query }, SEARCH_MAX_LENGTH) storage.set(SEARCH_KEY, searches) return searches } // 加載本地緩存的搜索歷史 export function loadSearch() { return storage.get(SEARCH_KEY, []) }

3.數據用vuex傳遞
在store/actions.js中寫入數據:

import * as types from './mutation-types'
import {saveSearch} from 'common/js/cache' export const saveSearchHistory = function({commit, state}, query) { commit(types.SET_SEARCH_HISTORY, saveSearch(query)) }

4.組件中調用vuex

import {mapActions} from 'vuex'// methods內:saveSearch() {this.saveSearchHistory(this.query) }, ...mapActions([ 'saveSearchHistory' ])

本文轉載自：https://blog.csdn.net/qq_31393401/article/details/79299606
vue列表進入詳情頁面返回時數據緩存
1.在app.vue中添加

2.在router.index中添加


3.在列表頁面添加

本文轉載自：https://blog.csdn.net/yanby921005/article/details/80360822
vue.js生命周期鉤子函數及緩存
在工作中用到最多的就是created,mounted,activated，deactivated.
由于系統需要緩存，使用了keep-alive

 <keep-alive :include="/keepalive[a-zA-Z]+/"><router-view></router-view> </keep-alive>

include 和 exclude 屬性允許組件有條件地緩存。二者都可以用逗號分隔字符串或正則表達式來表示
匹配首先檢查組件自身的 name 選項，如果 name 選項不可用，則匹配它的局部注冊名稱（父組件 components 選項的鍵值）。匿名組件不能被匹配。
//如果希望頁面緩存，就在當前頁的name屬性，加上符合正則條件的name名稱。不希望就加上不匹配的正則name名稱。
created
實例已經創建完成之后被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
//在剛進入頁面的時候,會觸發該函數的方法。只在頁面剛開始加載時執行一次。
mounted
el 被新創建的 vm.$el 替換，并掛載到實例上去之后調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
該鉤子在服務器端渲染期間不被調用。
//頁面已經完成會執行該函數。
activated
keep-alive 組件激活時調用。
該鉤子在服務器端渲染期間不被調用。
//當頁面存在緩存的時候執行該函數。
deactivated
keep-alive 組件停用時調用。
該鉤子在服務器端渲染期間不被調用。
//在頁面結束時觸發該方法，可清除掉滾動方法等緩存。
本文轉載自：https://blog.csdn.net/stubbor/article/details/73739765

轉載于:https://www.cnblogs.com/kelly-sunshine/p/10764430.html

總結

以上是生活随笔為你收集整理的vue缓存页面【二】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。