需求分析
背景：
1.數據列表頁，滾動加載數據；
2.多條數據情況下，點擊某一條，進入詳細頁進行編輯（修改，刪除）操作；
3.保存返回上一頁；
在上面的情況下，想要保持在上次瀏覽位置，并且保持數據是最新的；
解決辦法
1.原始的辦法：在點擊詳情頁的時候，記住瀏覽位置，傳遞參數或者存到本地緩存，然后在詳情頁操作完畢后，返回的時候，路由守衛可以判斷，是否詳情頁跳轉回來的，然后讓頁面滾動到上次記錄的位置；
思路是這樣，實際操作很麻煩；
2.推薦辦法：使用vue動態組件keep-alive,搭配路由守衛函數beforeRouteLeave，以及activated鉤子函數；
對于鉤子函數執行順序，以及作用詳細說明，請參考vue組件的生命周期
步驟詳解
我的步驟是按照開發思路進行的，場景就是從商品列表頁――>商品詳細頁――>商品列表（數據緩存）；
開發之前看到網上好多人都是在路由文件里面配置
meta:{keepAlive:true}
但我覺得沒有必要，因為列表頁不是一直需要緩存數據的，假如從首頁進入，則不需要，所以就在路由守衛函數中判斷是否需要緩存數據即可；
以下代碼，使用list.vue代表列表頁；detail.vue代表詳細頁；
場景1：點擊返回，判斷路由跳轉的是否是需要緩存的列表頁：
detail.vue
beforeRouteLeave (to, from, next) { if (to.name === 'M2mBoard') { to.meta.keepAlive = true } next() }由于keepAlive是vue2.0中內置組件，所以設置頁面路由meta.keepAlive = true即可緩存數據，路由跳轉是利用函數this.$router.go(-1)；就可以顯示在上次瀏覽的記錄位置；
場景2：編輯詳細頁數據，回到列表頁，則需要將修改的數據保存到本地，然后在列表頁的緩存數據中，更改顯示即可：
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() }列表頁中判斷一下，是否需要修改數據：
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 鉤子函數，在keep-alive組件激活時自動執行，判斷如果需要修改，從本地取出數據，循環列表數據，找出需要修改的那一條，進行顯示數據的修改（因為是臨時修改，所以只修改顯示的參數即可）；
場景3：在詳細頁點擊刪除該條數據
detail.vue
beforeRouteLeave (to, from, next) { if (to.name === 'M2mBoard' && !this.idDel) { to.meta.keepAlive = true } next() }刪除操作，可以排除后直接不用緩存，或者跟修改一樣的操作，判斷是刪除，臨時刪除，列表中緩存的數據也可以；
上面3種情況通常會同時出現，所以最后的寫法就是：
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 } }) } }列表頁種路由跳轉的時候需要進行meta.keepAlive = false操作，防止出現，從detail.vue跳轉回來后，list.vue在與其他頁面進行路由跳轉的時候，始終處于緩存狀態，數據不更新現象；
注意：在info.vue跳轉list.vue的路由活動最好使用this.$router.go(-1)，不然回到list.vue頁面，數據緩存了，但是頁面位置不會是上次訪問的位置；具體原因還在研究，哈哈哈...
ok，上面就是在項目開發使用中用到的keep-alive的整個思路；記錄一下，以免忘記，還有歡迎參考與指正。
以上所述是小編給大家介紹的Vue keepAlive 數據緩存工具實現返回上一個頁面瀏覽的位置，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
