? ? ? ?在用Vue2開發(fā)webapp的過程中，為了體驗更加友好盟迟，使用了keep-alive來做頁面緩存秋泳，當(dāng)頁面跳轉(zhuǎn)時不刷新頁面。關(guān)于keep-alive官方文檔如下：
keep-alive主要是起到一種緩存頁面的作用攒菠，在webapp中不用刷新迫皱，從而提高用戶體驗。但是再項目的實際應(yīng)用中卻遇到了問題辖众。請看下圖：
? ? ? ?從上圖中可以看出卓起，頁面的切換和敬，并不會保留原先的滾動條高度。比如戏阅，當(dāng)打開一個新聞客戶端昼弟，在新聞列表頁面，滑了很久找到了一個新聞奕筐，點進去看舱痘，看完之后再返回列表頁，發(fā)現(xiàn)滾動條到了頂部救欧，真是氣暈衰粹。又得重新滑到底部才能接著看。
? ? ? 對于上面的問題笆怠，先進行問題分析铝耻，為什么會這樣呢？我大致的想法是這樣蹬刷，因為vue的路由切換用的是hash的方式瓢捉，而hash相當(dāng)于平時所用的錨點，也就是在href屬性里添加"#"办成，平時點擊一個href="#"的時候泡态，滾動條會自動跳到頂部。
解決方案：
? ? ? 在這里迂卢，最簡單的辦法是某弦，當(dāng)頁面跳轉(zhuǎn)的時候，記錄該頁面滾動條的的高度（最后一次）而克，當(dāng)頁面回來的時候再去取值靶壮。
? ? ? vue-router提供了組件內(nèi)鉤子函數(shù)：beforeRouteEnter和beforeRouteLeave，正如其名员萍，vue-router提供的導(dǎo)航鉤子主要用來攔截導(dǎo)航腾降，讓它完成跳轉(zhuǎn)或取消。有多種方式可以在路由導(dǎo)航發(fā)生時執(zhí)行鉤子：全局的, 單個路由獨享的, 或者組件級的碎绎。
? ? ?有了路由鉤子函數(shù)螃壤，就可以再頁面切換的時候調(diào)整滾動條。
? ? ?還需要一個存取滾動條高度值的工具筋帖，這里直接使用vuex奸晴。利用vuex的狀態(tài)管理來進行滾動條存取。參照官方demo日麸。
最后蚁滋，滾動條高度得到了記錄保存，上圖：
