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

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

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

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

緩存組件，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, // 這個(gè)字段的意思稍后再說  
  keepAlive: true // 通過此字段判斷是否需要緩存當(dāng)前組件 
 } 
},

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

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

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

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

第一次進(jìn)入：beforeRouterEnter ->created->…->activated->…->deactivated

后續(xù)進(jìn)入時(shí)：beforeRouterEnter ->activated->deactivated

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

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

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

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

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

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

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

// list組價(jià)的activated鉤子
 activated() {
 // isUseCache為false時(shí)才重新刷新獲取數(shù)據(jù)
 // 因?yàn)閷ist使用keep-alive來緩存組件，所以默認(rèn)是會(huì)使用緩存數(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ù)，而其他頁面進(jìn)入list是重新刷新數(shù)據(jù)的。

至此，一個(gè)前進(jìn)刷新、后退返回的功能基本完成了。

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

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

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

最后再提一下，頁面滾動(dòng)位置的問題。

問題1：我們知道，在vue這種單頁應(yīng)用中，如果你在a頁面滾動(dòng)了一段距離后，此時(shí)前往b頁面后，b頁面也會(huì)停留在a頁面的滾動(dòng)位置。這個(gè)問題的解決，我們可以利用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.如果通過瀏覽器自帶的前進(jìn)后退按鈕切換的路由，那么會(huì)自動(dòng)使用瀏覽默認(rèn)的回滾上次頁面的瀏覽位置。

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

以上這篇vue中前進(jìn)刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置的實(shí)例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論