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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序定制開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了拜城免費(fèi)建站歡迎大家使用！

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)題，思考了幾套方案，總是不太完善。百度搜到的方案也基本都只能滿足一些很簡(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的話，則頁(yè)面滾動(dòng)到（0,0）的位置，這樣解決了問(wèn)題1。那么如果打開(kāi)一個(gè)頁(yè)面，它的路由的meta.savedPosition有值的話，則滾動(dòng)到上次瀏覽的位置，因?yàn)閙eta.savedPosition保存的就是上次瀏覽的位置。

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

網(wǎng)站標(biāo)題：vue中如何實(shí)現(xiàn)前進(jìn)刷新、后退緩存用戶瀏覽數(shù)據(jù)和瀏覽位置
鏈接URL：http://m.rwnh.cn/article12/jepogc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、品牌網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、企業(yè)建站、電子商務(wù)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)