解決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 路由對象。第三個參數 savedPosition 當且僅當 popstate 導航 (通過瀏覽器的 前進/后退 按鈕觸發(fā)) 時才可用。它的使用有很多種，可以試試。
以上這篇解決vue單頁路由跳轉后scrollTop的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue中通過Vue.extend動態(tài)創(chuàng)建實例的方法
這篇文章主要介紹了Vue中通過Vue.extend動態(tài)創(chuàng)建實例的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了elementui中使用el-tree控件懶加載和局部刷新，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
在 Vue CLI 創(chuàng)建的項目中,vue.config.js 是核心配置文件,用于定制化構建、開發(fā)和部署流程,本文詳細解析了該文件的常用配置項,并結合代碼示例和表格說明,幫助開發(fā)者高效管理項目配置,提升開發(fā)體驗,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了Vue中全局常用的過濾方法解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
我們不光要學會Vue的組件化實現(xiàn)過程,還要懂得組件數據發(fā)生變化,更新組件的過程,這篇文章主要給大家介紹了關于Vue3組件更新過程的相關資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue如何實現(xiàn)本項目頁面之間跳轉，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue模板語法-插值，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-03-03
這篇文章主要介紹了詳解一次Vue低版本安卓白屏問題的解決過程,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
vue?動態(tài)路由component?傳遞變量報錯問題解決
這篇文章主要為大家介紹了vue?動態(tài)路由component?傳遞變量報錯問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
淺析vue-router jquery和params傳參(接收參數)$router $route的區(qū)別
今天做項目時踩到了vue-router傳參的坑（jquery和params），所以決定總結一下二者的區(qū)別。感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08