Vue keepAlive 數(shù)據(jù)緩存工具實(shí)現(xiàn)返回上一個(gè)頁(yè)面瀏覽的位置

需求分析

背景：

1.數(shù)據(jù)列表頁(yè)，滾動(dòng)加載數(shù)據(jù)；

2.多條數(shù)據(jù)情況下，點(diǎn)擊某一條，進(jìn)入詳細(xì)頁(yè)進(jìn)行編輯（修改，刪除）操作；

3.保存返回上一頁(yè)；

在上面的情況下，想要保持在上次瀏覽位置，并且保持?jǐn)?shù)據(jù)是最新的；

解決辦法

1.原始的辦法：在點(diǎn)擊詳情頁(yè)的時(shí)候，記住瀏覽位置，傳遞參數(shù)或者存到本地緩存，然后在詳情頁(yè)操作完畢后，返回的時(shí)候，路由守衛(wèi)可以判斷，是否詳情頁(yè)跳轉(zhuǎn)回來的，然后讓頁(yè)面滾動(dòng)到上次記錄的位置；

思路是這樣，實(shí)際操作很麻煩；

2.推薦辦法：使用vue動(dòng)態(tài)組件keep-alive,搭配路由守衛(wèi)函數(shù)beforeRouteLeave，以及activated鉤子函數(shù)；

對(duì)于鉤子函數(shù)執(zhí)行順序，以及作用詳細(xì)說明，請(qǐng)參考vue組件的生命周期

步驟詳解

我的步驟是按照開發(fā)思路進(jìn)行的，場(chǎng)景就是從商品列表頁(yè)——>商品詳細(xì)頁(yè)——>商品列表（數(shù)據(jù)緩存）；

開發(fā)之前看到網(wǎng)上好多人都是在路由文件里面配置

meta:{keepAlive:true}

但我覺得沒有必要，因?yàn)榱斜眄?yè)不是一直需要緩存數(shù)據(jù)的，假如從首頁(yè)進(jìn)入，則不需要，所以就在路由守衛(wèi)函數(shù)中判斷是否需要緩存數(shù)據(jù)即可；

以下代碼，使用list.vue代表列表頁(yè)；detail.vue代表詳細(xì)頁(yè)；

場(chǎng)景1：點(diǎn)擊返回，判斷路由跳轉(zhuǎn)的是否是需要緩存的列表頁(yè)：

detail.vue

beforeRouteLeave (to, from, next) {
 if (to.name === 'M2mBoard') {
 to.meta.keepAlive = true
 }
 next()
 }

由于keepAlive是vue2.0中內(nèi)置組件，所以設(shè)置頁(yè)面路由meta.keepAlive = true即可緩存數(shù)據(jù)，路由跳轉(zhuǎn)是利用函數(shù)this.$router.go(-1)；就可以顯示在上次瀏覽的記錄位置；

場(chǎng)景2：編輯詳細(xì)頁(yè)數(shù)據(jù)，回到列表頁(yè)，則需要將修改的數(shù)據(jù)保存到本地，然后在列表頁(yè)的緩存數(shù)據(jù)中，更改顯示即可：

detail.vue

beforeRouteLeave (to, from, next) {
 if (to.name === 'M2mBoard') {
 to.meta.keepAlive = true
 }
 if (this.isChange) {
 let changeData = {
 inquiryNo: this.inquiry.inquiryNo,
 inquiryTitle: this.inquiry.inquiryTitle
 }
 window.sessionStorage.setItem('changeData', JSON.stringify(changeData))
 }
 to.meta.isChange = this.isChange
 next()
 }

列表頁(yè)中判斷一下，是否需要修改數(shù)據(jù)：

list.vue

activated () {
 if (this.$route.meta.isChange) {
 let changeData = JSON.parse(window.sessionStorage.getItem('changeData'))
 this.list.forEach(item => {
 if (item.inquiryNo === changeData.inquiryNo) {
  item.inquiryTitle = changeData.inquiryTitle
 }
 })
 }
 }

activated 鉤子函數(shù)，在keep-alive組件激活時(shí)自動(dòng)執(zhí)行，判斷如果需要修改，從本地取出數(shù)據(jù)，循環(huán)列表數(shù)據(jù)，找出需要修改的那一條，進(jìn)行顯示數(shù)據(jù)的修改（因?yàn)槭桥R時(shí)修改，所以只修改顯示的參數(shù)即可）；

場(chǎng)景3：在詳細(xì)頁(yè)點(diǎn)擊刪除該條數(shù)據(jù)

detail.vue

beforeRouteLeave (to, from, next) {
 if (to.name === 'M2mBoard' && !this.idDel) {
 to.meta.keepAlive = true
 }
 next()
 }

刪除操作，可以排除后直接不用緩存，或者跟修改一樣的操作，判斷是刪除，臨時(shí)刪除，列表中緩存的數(shù)據(jù)也可以；

上面3種情況通常會(huì)同時(shí)出現(xiàn)，所以最后的寫法就是：

detail.vue

beforeRouteLeave (to, from, next) {
 if (to.name === 'M2mBoard' && !this.idDel) {
 to.meta.keepAlive = true
 }
 if (this.isChange) {
 let changeData = {
 inquiryNo: this.inquiry.inquiryNo,
 inquiryTitle: this.inquiry.inquiryTitle
 }
 window.sessionStorage.setItem('changeData', JSON.stringify(changeData))
 }
 to.meta.isChange = this.isChange
 next()
 }

list.vue

beforeRouteLeave (to, from, next) {
 from.meta.keepAlive = false
 next()
 },
 activated () {
 if (this.$route.meta.isChange) {
 let changeData = JSON.parse(window.sessionStorage.getItem('changeData'))
 this.list.forEach(item => {
 if (item.inquiryNo === changeData.inquiryNo) {
  item.inquiryTitle = changeData.inquiryTitle
 }
 })
 }
 }

列表頁(yè)種路由跳轉(zhuǎn)的時(shí)候需要進(jìn)行meta.keepAlive = false操作，防止出現(xiàn)，從detail.vue跳轉(zhuǎn)回來后，list.vue在與其他頁(yè)面進(jìn)行路由跳轉(zhuǎn)的時(shí)候，始終處于緩存狀態(tài)，數(shù)據(jù)不更新現(xiàn)象；

注意：在info.vue跳轉(zhuǎn)list.vue的路由活動(dòng)最好使用this.$router.go(-1)，不然回到list.vue頁(yè)面，數(shù)據(jù)緩存了，但是頁(yè)面位置不會(huì)是上次訪問的位置；具體原因還在研究，哈哈哈...

ok，上面就是在項(xiàng)目開發(fā)使用中用到的keep-alive的整個(gè)思路；記錄一下，以免忘記，還有歡迎參考與指正。

以上所述是小編給大家介紹的Vue keepAlive 數(shù)據(jù)緩存工具實(shí)現(xiàn)返回上一個(gè)頁(yè)面瀏覽的位置，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！