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

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

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

最近在項(xiàng)目中遇到這個(gè)問(wèn)題，思考了幾套方案，總是不太完善。百度搜到的方案也基本都只能滿(mǎn)足一些很簡(jiǎn)單的需求。對(duì)于復(fù)雜一些的情況，還是有些不完善的地方。以下是個(gè)人對(duì)于這種場(chǎng)景的一個(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字段來(lái)判斷當(dāng)前路由組件是否需要緩存。這里的meta的keepAlive是我們自定義的，當(dāng)然你也可以叫別的名字。

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

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

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

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

說(shuō)這之前，先簡(jiǎn)單說(shuō)一下和緩存相關(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ù)。思路有了，下面我們來(lái)實(shí)現(xiàn)：

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

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

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

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

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

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

// list組價(jià)的activated鉤子
 activated() {
 // isUseCache為false時(shí)才重新刷新獲取數(shù)據(jù)
 // 因?yàn)閷?duì)list使用keep-alive來(lái)緩存組件，所以默認(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前，我們?cè)O(shè)置了list的isUseCache為true。所以，只有從detail返回list才使用緩存數(shù)據(jù)，而其他頁(yè)面進(jìn)入list是重新刷新數(shù)據(jù)的。

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

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

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ù)和瀏覽位置的問(wèn)題。

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

問(wèn)題1：我們知道，在vue這種單頁(yè)應(yīng)用中，如果你在a頁(yè)面滾動(dòng)了一段距離后，此時(shí)前往b頁(yè)面后，b頁(yè)面也會(huì)停留在a頁(yè)面的滾動(dòng)位置。這個(gè)問(wèn)題的解決，我們可以利用router本身提供的功能來(lái)解決：

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ù)寫(xiě)的是：

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

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

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

最新評(píng)論