vue中如何實現(xiàn)前進刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置

這篇文章主要介紹了vue中如何實現(xiàn)前進刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

vue中，我們所要實現(xiàn)的一個場景就是：

1.搜索頁面==>到搜索結(jié)果頁時，搜索結(jié)果頁面要重新獲取數(shù)據(jù)，

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

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

緩存組件，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"/>

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

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

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

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

刷新數(shù)據(jù)or緩存數(shù)據(jù)的實現(xiàn)：

說這之前，先簡單說一下和緩存相關(guān)的vue鉤子函數(shù)。

設(shè)置了keepAlive緩存的組件：

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

后續(xù)進入時：beforeRouterEnter ->activated->deactivated

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

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

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

當(dāng)我們從詳情頁返回時，我們把list頁面路由的isUseCache設(shè)置成true，這樣我們在返回list頁面時會使用緩存數(shù)據(jù)：

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

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

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

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

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

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

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

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

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

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

問題1：我們知道，在vue這種單頁應(yīng)用中，如果你在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是路由提供的基礎(chǔ)功能，這段函數(shù)寫的是：

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue中如何實現(xiàn)前進刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!