vue路由切換時(shí)內(nèi)容組件的滾動條回到頂部

情景描述

1.頁面 /a, 有輸入框, 當(dāng)輸入框輸入合適的值的時(shí)候, 不隱藏軟鍵盤, 點(diǎn)擊相應(yīng)按鈕直接跳到 /b

2.頁面 /b, 頁面本來內(nèi)容很少, 沒有滾動條的, 可是莫名的被下方的灰色區(qū)域頂?shù)娇梢晠^(qū)上面, 內(nèi)容被隱藏了一點(diǎn), 但是手動拉回正常展示以后, 問題就不再重現(xiàn)

解決辦法(針對單個(gè)頁面這個(gè)問題的)

// 在/b頁面, vue的mounted方法中, 寫設(shè)置頁面滾動條的這個(gè)方法 mounted() { // 切換頁面時(shí)滾動條自動滾動到頂部 window.scrollTo(0,0); }

1

2

3

4

5

針對全部頁面的話, 可以在路由的鉤子函數(shù)中設(shè)置(main.js中)

// 放在`router.beforeEach`更好 router.afterEach((to,from,next) => { window.scrollTo(0,0); // 或 // window.scroll(0, 0); });

1

2

3

4

5

6

router.afterEach(() => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; })

1

2

3

4

NAT Vue

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。