解決vue單頁路由跳轉后scrollTop的問題
更新時間：2018年09月03日 11:54:13 作者：小雷雷哥哥
今天小編就為大家分享一篇解決vue單頁路由跳轉后scrollTop的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
作為vue的初級使用者，在開發(fā)過程中遇到的坑太多了。在看頁面的時候發(fā)現(xiàn)了頁面滾動的問題，當一個頁面滾動了，點擊頁面上的路由調到下一個頁面時，跳轉后的頁面也是滾動的，滾動條并不是在頁面的頂部。
最開始我使用了一個很笨的方法，每個頁面上都加上window.scrollTop(0,0);來解決問題，但是這個太繁瑣了。最后和小伙伴們商量了一下，在main.js頁面上加了這么一段代碼
router.afterEach(function (to) {
window.scrollTo(0, 0)
})
路由跳轉后就不會出現(xiàn)滾動的問題了。
但是這種做法是不友好的，我們可以使用scrollBehavior (to, from, savedPosition) {}來解決問題。
在我們寫路由的時候做個處理，如下
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 路由對象。第三個參數(shù) savedPosition 當且僅當 popstate 導航 (通過瀏覽器的 前進/后退 按鈕觸發(fā)) 時才可用。它的使用有很多種，可以試試。
以上這篇解決vue單頁路由跳轉后scrollTop的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue中的data,computed,methods,created,mounted用法及說明
這篇文章主要介紹了vue中的data,computed,methods,created,mounted用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vue 指令實現(xiàn)按鈕級別權限管理功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue實現(xiàn)點擊展開,點擊收起效果，首先我們需要定義data里面的數(shù)據(jù)，使用computed對data進行處理,需要的朋友可以參考下2018-04-04
vue 數(shù)據(jù)(data)賦值問題的解決方案
這篇文章主要介紹了vue 數(shù)據(jù)(data)賦值問題的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-03-03
這篇文章主要介紹了如何解決ElementPlus的el-table底白線問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue2如何安裝引入Ant Design問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue抽出組件并傳值實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue中關于checkbox使用的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue.js過濾器+ajax實現(xiàn)事件監(jiān)聽及后臺php數(shù)據(jù)交互實例
這篇文章主要介紹了vue.js過濾器+ajax實現(xiàn)事件監(jiān)聽及后臺php數(shù)據(jù)交互,結合實例形式分析了vue.js前臺過濾器與ajax后臺數(shù)據(jù)交互相關操作技巧,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue-cli 目錄結構詳細講解總結，詳細的介紹了整個項目的目錄以及目錄文件的用法，非常具有實用價值，需要的朋友可以參考下2019-01-01