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