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