本質就是, 利用內置組件
<keep-alive>在頁面組件得以被緩存的基礎上, 再加以document.documentElement.scrollTop獲取滾動距離, 后返回頁面時恢復滾動距離
實現效果, 打開A頁面, 滾動至a處, 切換至B頁面, 返回A頁面, 此時頁面位置為a點而非頂部
路由出口
<div class="main">
<!-- 包裹`<keep-alive>` -->
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
頁面組件
export default {
data(){
scrollTop: 0, // 儲存滾動位置
},
activated() {
// 進入該組件后讀取數據變量設置滾動位置
// 注意, 此處由頁面是否具有 DTD (如: `<!DOCTYPE html>`), 決定具體選擇, 詳見參考資料
document.documentElement.scrollTop = this.scrollTop;
// document.body.scrollTop = this.scrollTop;
},
beforeRouteLeave(to, from, next) {
// 離開組件時保存滾動位置
// 注意, 此時需調用路由守衛`beforeRouterLeave`而非生命周期鈎子`deactivated`
// 因為, 此時利用`deactivated`獲取的 DOM 信息已經是新頁面得了
this.scrollTop = document.documentElement.scrollTop;
next();
},
}