解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題
作為vue的初級(jí)使用者,在開發(fā)過程中遇到的坑太多了。在看頁面的時(shí)候發(fā)現(xiàn)了頁面滾動(dòng)的問題,當(dāng)一個(gè)頁面滾動(dòng)了,點(diǎn)擊頁面上的路由調(diào)到下一個(gè)頁面時(shí),跳轉(zhuǎn)后的頁面也是滾動(dòng)的,滾動(dòng)條并不是在頁面的頂部。
最開始我使用了一個(gè)很笨的方法,每個(gè)頁面上都加上window.scrollTop(0,0);來解決問題,但是這個(gè)太繁瑣了。最后和小伙伴們商量了一下,在main.js頁面上加了這么一段代碼
router.afterEach(function (to) { window.scrollTo(0, 0) })
路由跳轉(zhuǎn)后就不會(huì)出現(xiàn)滾動(dòng)的問題了。
但是這種做法是不友好的,我們可以使用scrollBehavior (to, from, savedPosition) {}來解決問題。
在我們寫路由的時(shí)候做個(gè)處理,如下
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: resolve => require(['../components/HelloWorld.vue'],resolve) } ], scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } })
scrollBehavior 方法接收 to 和 from 路由對(duì)象。第三個(gè)參數(shù) savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (通過瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時(shí)才可用。它的使用有很多種,可以試試。
以上這篇解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中的data,computed,methods,created,mounted用法及說明
這篇文章主要介紹了vue中的data,computed,methods,created,mounted用法及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07Vue 指令實(shí)現(xiàn)按鈕級(jí)別權(quán)限管理功能
這篇文章主要介紹了Vue 指令實(shí)現(xiàn)按鈕級(jí)別權(quán)限管理功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04vue實(shí)現(xiàn)點(diǎn)擊展開點(diǎn)擊收起效果
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊展開,點(diǎn)擊收起效果,首先我們需要定義data里面的數(shù)據(jù),使用computed對(duì)data進(jìn)行處理,需要的朋友可以參考下2018-04-04vue 數(shù)據(jù)(data)賦值問題的解決方案
這篇文章主要介紹了vue 數(shù)據(jù)(data)賦值問題的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2021-03-03vue.js過濾器+ajax實(shí)現(xiàn)事件監(jiān)聽及后臺(tái)php數(shù)據(jù)交互實(shí)例
這篇文章主要介紹了vue.js過濾器+ajax實(shí)現(xiàn)事件監(jiān)聽及后臺(tái)php數(shù)據(jù)交互,結(jié)合實(shí)例形式分析了vue.js前臺(tái)過濾器與ajax后臺(tái)數(shù)據(jù)交互相關(guān)操作技巧,需要的朋友可以參考下2018-05-05vue-cli 目錄結(jié)構(gòu)詳細(xì)講解總結(jié)
這篇文章主要介紹了vue-cli 目錄結(jié)構(gòu)詳細(xì)講解總結(jié),詳細(xì)的介紹了整個(gè)項(xiàng)目的目錄以及目錄文件的用法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2019-01-01