本質就是, 利用內置組件
<keep-alive>在頁面組件得以被快取的基礎上, 再加以document.documentElement.scrollTop獲取滾動距離, 后回傳頁面時恢復滾動距離
實作效果, 打開A頁面, 滾動至a處, 切換至B頁面, 回傳A頁面, 此時頁面位置為a點而非頂部
路由出口
<div >
<!-- 包裹`<keep-alive>` -->
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
頁面組件
export default {
data(){
scrollTop: 0, // 儲存滾動位置
},
activated() {
// 進入該組件后讀取資料變數設定滾動位置
// 注意, 此處未選擇使用`document.body.scrollTop`, 詳見參考資料
document.documentElement.scrollTop = this.scrollTop;
},
beforeRouteLeave(to, from, next) {
// 離開組件時保存滾動位置
// 注意, 此時需呼叫路由守衛`beforeRouterLeave`而非生命周期鉤子`deactivated`
// 因為, 此時利用`deactivated`獲取的 DOM 資訊已經是新頁面得了
this.scrollTop = document.documentElement.scrollTop;
next();
},
}
參考資料: document.documentElement和document.body的區別
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/345547.html
標籤：其他