Vue-Router進(jìn)階之滾動(dòng)行為詳解
滾動(dòng)行為
使用前端路由，當(dāng)切換到新路由時(shí)，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時(shí)頁(yè)面如何滾動(dòng)。
注意: 這個(gè)功能只在 HTML5 history 模式下可用。
當(dāng)創(chuàng)建一個(gè) Router 實(shí)例，你可以提供一個(gè) scrollBehavior 方法：
var router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滾動(dòng)到哪個(gè)的位置
}
})
scrollBehavior 方法接收 to 和 from 路由對(duì)象。第三個(gè)參數(shù) savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (通過瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時(shí)才可用。
這個(gè)方法返回滾動(dòng)位置的對(duì)象信息，長(zhǎng)這樣：
- { x: number, y: number }
- { selector: string }
如果返回一個(gè)布爾假的值，或者是一個(gè)空對(duì)象，那么不會(huì)發(fā)生滾動(dòng)。
舉例：
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
對(duì)于所有路由導(dǎo)航，簡(jiǎn)單地讓頁(yè)面滾動(dòng)到頂部。
返回 savedPosition，在按下 后退/前進(jìn) 按鈕時(shí)，就會(huì)像瀏覽器的原生表現(xiàn)那樣：
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
如果你要模擬『滾動(dòng)到錨點(diǎn)』的行為：
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue服務(wù)端渲染瀏覽器端緩存（keep-alive）
在使用服務(wù)器端渲染時(shí)，除了服務(wù)端的接口緩存、頁(yè)面緩存、組建緩存等，瀏覽器端也避免不了要使用緩存，減少頁(yè)面的重繪。這篇文章主要介紹了詳解vue服務(wù)端渲染瀏覽器端緩存（keep-alive），感興趣的小伙伴們可以參考一下2018-10-10
vue?draggable組件實(shí)現(xiàn)拖拽及點(diǎn)擊無(wú)效問題的解決
這篇文章主要介紹了vue?draggable組件實(shí)現(xiàn)拖拽及點(diǎn)擊無(wú)效問題的解決,只需要在設(shè)置handle屬性就可以了，.defaultTypeTag 是要拖拽的塊的類名，要注意的是需要做點(diǎn)擊事件的項(xiàng)不能包含在這個(gè)類名里面，不然會(huì)無(wú)法觸發(fā)點(diǎn)擊事件，詳細(xì)解決辦法跟隨小編一起學(xué)習(xí)吧2022-05-05
vue中對(duì)象數(shù)組去重的實(shí)現(xiàn)
這篇文章主要介紹了vue中對(duì)象數(shù)組去重的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
解決vue單頁(yè)面 回退頁(yè)面 keeplive 緩存問題
這篇文章主要介紹了解決vue單頁(yè)面 回退頁(yè)面 keeplive 緩存問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07
一文詳解Vue3的watch是如何實(shí)現(xiàn)監(jiān)聽的
watch這個(gè)API大家都很熟悉,今天這篇文章小編來(lái)帶你搞清楚Vue3的watch是如何實(shí)現(xiàn)對(duì)響應(yīng)式數(shù)據(jù)進(jìn)行監(jiān)聽的,希望對(duì)大家有一定的幫助2024-11-11
vue3不能使用history.pushState修改url參數(shù)踩坑
這篇文章主要為大家介紹了vue3不能使用history.pushState修改url參數(shù)踩坑解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
本篇文章主要介紹了vuejs 單文件組件.vue 文件的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-07-07
這篇文章主要介紹了詳解Vue單元測(cè)試case寫法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-05-05
Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)2
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)的相關(guān)資料，實(shí)現(xiàn)Observer構(gòu)造函數(shù)，監(jiān)聽已有數(shù)據(jù)data中的所有屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
解決Element中el-date-picker組件不回填的情況
這篇文章主要介紹了解決Element中el-date-picker組件不回填的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-11-11