這篇文章主要介紹了vue 詳情跳轉至列表頁實現列表頁緩存，文中通過示例代碼介紹的非常詳細，寫的十分的全面細緻，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。
金主提了一個需求，希望公衆號內的商城能夠像app一樣，從商品詳情頁跳轉至列表頁及其他列表頁時，可以實現列表頁緩存（數據不刷新、位置固定到之前點的商品的位置）
本來想着scrollBehavior應該可以滿足，但是實際操作中發現：如果列表帶着分頁，位置是不會定位到點擊的位置的
在網上轉了一圈，終於找到適合自己的方法——beforeRouteLeave
注：beforeRouteLeave只對一級頁面起作用，不適用於children中的其他二級或其他級別的頁面
以上是準備工作，接下來 可以步入正題了：
找到入口掛載頁面：App.vue 在router-view外部包裹一個keep-alive的標籤
因爲不是所有頁面都需要緩存，所以把需要緩存的頁面中加入name值，並將name值加入keep-alive中
<keep-alive v-if="isRouterAlive" include="starShop" >
<router-view></router-view>
</keep-alive>
當然，僅僅是這些，是不能實現緩存的，
剛開始我是學着網上的方法，這樣寫的，當從列表點入詳情頁時，就將 列表頁的keepalive值，賦爲true （實現緩存）
beforeRouteLeave(to, from, next) {
if(from.path == '/sale/newGoods/index' && to.path == '/goods/detail') {
from.meta.keepAlive = true;
this.loading = true;
next();
return
} else {
from.meta.keepAlive = false;
window.location.reload();
this.$destroy();
next();
return
}
},
但是後期金主發現一個bug： 當我從列表一點擊進入詳情之後，如果直接從詳情頁，點擊進入別的店鋪列表頁，即列表二，最新的列表頁內展示的商品列表是之前的數據，並沒有變爲最新的店鋪列表內容 ， 即列表二頁面展示的還是列表一的商品
玩大了，這個問題比較着急啊，萬一把顧客繞暈了，人家不買東西了，那我罪過不就大了咩
晚上趁着月黑風高、夜深人靜的時候，我苦思冥想，終於把這個社會毒瘤挖掉了
我絕不是屈居於金主的淫威之下，只是因爲我對技術的執著，過度追求完美的我，忍受不聊我的東西出現這樣大的漏洞
要看解決辦法的直接來這 ↓↓↓↓↓↓
首先摒棄上面的列表頁面的方法
第一步：找到商品詳情頁，最爲主角之一，我在這裏用到了beforeRouteEnter、beforeRouteLeave
beforeRouteEnter (to, from, next) {
next(vm =>{
vm.formUrl = from.path;
console.log(vm.formUrl)
});
},
beforeRouteLeave(to, from, next) {
to.meta.keepAlive = false;
if(to.path == this.formUrl){
to.meta.keepAlive = true;
next();
return
}else{
to.meta.KeepAlive = false;
window.localStorage.removeItem('isRefresh')
this.$destroy();
next();
return
}
},
beforeRouteEnter：進入路由之前執行的函數（拿到列表一的路由）
beforeRouteLeave：離開路由之前執行的函數（拿到列表二的路由）
通過這兩個鉤子，可以成功的拿到事件的另外兩位主角路由（列表一、列表二）
在詳情頁中，當離開該頁之前，在beforeRouteLeave內進行列表一、列表二的路由比較
若兩路由相同，則跳轉目的頁面（to.meta.keepAlive）值爲true，列表頁面進行緩存（比如從詳情頁返回的時候）
若兩路由不同，則跳轉目的頁面發生了變化（比如從鞋帽列表——>鞋子商品——>鞋子列表），則鞋子列表頁面不需要緩存，需要刷新獲取最新的鞋子列表數據
第二步：處理事件的第二主角——列表頁面
這裏我僅用到了beforeRouteEnter
這個鉤子中，我們可以拿到當前頁面的keepAlive值
這個值是在詳情頁中就已經給定的
如果是true，表示緩存，否則爲不緩存（刷新）
防止頁面一直刷新，變成死亡函數，我們要在data中聲明一個變量isRefresh
isRefresh: window.localStorage.getItem('isRefresh') || true
beforeRouteEnter (to, from, next) {
next(vm =>{
if(to.meta.keepAlive != true && to.meta.keepAlive != null){
vm.goods=[];
window.localStorage.setItem('isRefresh',true)
if(JSON.stringify(window.localStorage.getItem('isRefresh')) != false){
window.localStorage.setItem('isRefresh',false)
location.reload();
}
}
});
return
},
如果當前頁to.meta.keepAlive值不爲true，且值存在，則需刷新頁面
防止頁面一直刷新，
window.localStorage.setItem('isRefresh',true)
設置緩存變量isRefresh，值爲true（表示需要刷新）
當to.meta.keepAlive值不爲true且isRefresh值爲true，頁面刷新，且isRefresh賦值爲false，即關閉刷新
vm.goods=[];是當頁面跳去新的列表頁刷新之前，會出現短暫的列表展示，爲了避免不必要的誤導，在檢測到是跳轉到新的列表頁時，我將列表頁的goods列表情況，視覺感受會好一些
因項目不同而異，不需要可以去掉
多張頁面之間跳轉，判斷是否需要緩存或刷新獲取新數據，就是這樣了
結語
感謝您的觀看，如有不足之處，歡迎批評指正。
獲取資料👈👈👈
本次給大家推薦一個免費的學習羣，裏面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q羣：👉👉👉619586920👈👈👈，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。