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