Vue-Router進(jìn)階之滾動行為詳解
滾動行為
使用前端路由，當(dāng)切換到新路由時(shí)，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時(shí)頁面如何滾動。
注意: 這個(gè)功能只在 HTML5 history 模式下可用。
當(dāng)創(chuàng)建一個(gè) Router 實(shí)例，你可以提供一個(gè) scrollBehavior 方法：
var router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滾動到哪個(gè)的位置
}
})
scrollBehavior 方法接收 to 和 from 路由對象。第三個(gè)參數(shù) savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (通過瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時(shí)才可用。
這個(gè)方法返回滾動位置的對象信息，長這樣：
- { x: number, y: number }
- { selector: string }
如果返回一個(gè)布爾假的值，或者是一個(gè)空對象，那么不會發(fā)生滾動。
舉例：
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
對于所有路由導(dǎo)航，簡單地讓頁面滾動到頂部。
返回 savedPosition，在按下 后退/前進(jìn) 按鈕時(shí)，就會像瀏覽器的原生表現(xiàn)那樣：
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
如果你要模擬『滾動到錨點(diǎn)』的行為：
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇vue2.0模擬錨點(diǎn)的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue3.0搭配.net core實(shí)現(xiàn)文件上傳組件
這篇文章主要介紹了vue3.0搭配.net core實(shí)現(xiàn)文件上傳組件，幫助大家開發(fā)Web應(yīng)用程序，完成需求，感興趣的朋友可以了解下2020-10-10
vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說明
這篇文章主要介紹了vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說明，具有很好的參考價(jià)值，希望大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在Vue3.x中實(shí)現(xiàn)類似React.lazy效果的方法詳解
React 的 React.lazy 功能為組件懶加載提供了原生支持,允許開發(fā)者將組件渲染推遲到實(shí)際需要時(shí)再進(jìn)行,雖然 Vue3.x 沒有一個(gè)直接對應(yīng)的 lazy 函數(shù),但我們可以通過動態(tài)導(dǎo)入和 defineAsyncComponent 方法來實(shí)現(xiàn)類似的效果,需要的朋友可以參考下2024-03-03
在系統(tǒng)開發(fā)中遇到了這么一個(gè)問題：后端一次性返回上百條的數(shù)據(jù)，我需要把返回的數(shù)據(jù)全部顯示在表格里，而且甲方爸爸明確指定了表格是不允許使用分頁的。可是當(dāng)使用a-table裝載上百條數(shù)據(jù)時(shí)，頁面出現(xiàn)了明顯的卡頓現(xiàn)象。只能使用滾動加載的方案來代替了。2021-06-06
vue進(jìn)度條組件實(shí)現(xiàn)代碼(可拖拽可點(diǎn)擊)
在日常開發(fā)中隨著需求的個(gè)性化,邏輯的復(fù)雜化,自定義組件也變得越來越常見,這篇文章主要給大家介紹了關(guān)于vue進(jìn)度條組件實(shí)現(xiàn)(可拖拽可點(diǎn)擊)的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要給大家介紹了關(guān)于使用vue3+ts打開echarts的正確方式,在Vue3中使用ECharts組件可以方便地創(chuàng)建各種數(shù)據(jù)可視化圖表,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要給大家介紹了關(guān)于axios封裝與傳參的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
TinyMCE是一個(gè)輕量級的基于瀏覽器的所見即所得編輯器,由JavaScript寫成,TinyMCE是一個(gè)根據(jù)LGPL license發(fā)布的自由軟件,你可以把它用于商業(yè)應(yīng)用,這篇文章主要介紹了Vue 富文本編輯器tinymce的安裝教程,需要的朋友可以參考下2023-09-09
vue中Element-ui 輸入銀行賬號每四位加一個(gè)空格的實(shí)現(xiàn)代碼
我們在輸入銀行賬號會設(shè)置每四位添加一個(gè)空格，輸入金額，每三位添加一個(gè)空格。那么，在vue，element-ui 組件中，如何實(shí)現(xiàn)呢？下面小編給大家?guī)砹藇ue中Element-ui 輸入銀行賬號每四位加一個(gè)空格的實(shí)現(xiàn)代碼，感興趣的朋友一起看看吧2018-09-09