作為vue的初級使用者，在開發(fā)過程中遇到的坑太多了。在看頁面的時(shí)候發(fā)現(xiàn)了頁面滾動(dòng)的問題，當(dāng)一個(gè)頁面滾動(dòng)了，點(diǎn)擊頁面上的路由調(diào)到下一個(gè)頁面時(shí)，跳轉(zhuǎn)后的頁面也是滾動(dòng)的，滾動(dòng)條并不是在頁面的頂部

?

在我們寫路由的時(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 路由對象。第三個(gè)參數(shù) savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (通過瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時(shí)才可用。它的使用有很多種，可以試試。

以上這篇解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題就是小熊分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持小熊我,有問題也提出來

轉(zhuǎn)載于:https://www.cnblogs.com/520BigBear/p/10042222.html

總結(jié)

以上是生活随笔為你收集整理的解决vue单页路由跳转后scrollTop的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。