如何在 Vue Router 里實(shí)現(xiàn)記住瀏覽器頁面的滾動(dòng)位置
來源 | https://www.cnblogs.com/classlate/archive/2021/11/02/15501987.html
路由出口
<div class="main"><!-- 包裹`<keep-alive>` --><keep-alive><router-view></router-view></keep-alive></div>
頁面組件
export default {data(){scrollTop: 0, // 儲(chǔ)存滾動(dòng)位置},activated() {// 進(jìn)入該組件后讀取數(shù)據(jù)變量設(shè)置滾動(dòng)位置// 注意, 此處由頁面是否具有 DTD (如: `<!DOCTYPE html>`), 決定具體選擇, 詳見參考資料document.documentElement.scrollTop = this.scrollTop;// document.body.scrollTop = this.scrollTop;},beforeRouteLeave(to, from, next) {// 離開組件時(shí)保存滾動(dòng)位置// 注意, 此時(shí)需調(diào)用路由守衛(wèi)`beforeRouterLeave`而非生命周期鉤子`deactivated`// 因?yàn)? 此時(shí)利用`deactivated`獲取的 DOM 信息已經(jīng)是新頁面得了this.scrollTop = document.documentElement.scrollTop;next();},}
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào) 
評(píng)論
圖片
表情