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