摘要:滾動行為用戶良好的交互體驗功能使用前端路由,當(dāng)切換到新路由時,想要頁面滾到頂部,或者是保持原先的滾動位置,就像重新加載頁面那樣。具體方法實例期望滾動到哪個的位置要去的路由離開的路由對象當(dāng)且僅當(dāng)導(dǎo)航通過瀏覽器的前進(jìn)后退按鈕觸發(fā)時才可用。
滾動行為
==用戶良好的交互體驗==
功能 使用前端路由,當(dāng)切換到新路由時,想要頁面滾到頂部,或者是保持原先的滾動位置,就像重新加載頁面那樣。 vue-router 能做到,而且更好,它讓你可以自定義路由切換時頁面如何滾動。
注意事項
這個功能只在 HTML5 history 模式下可用。
具體方法實例
const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滾動到哪個的位置 } })
滾動行為傳遞的值to要去的路由
from 離開的路由對象
savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (通過瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時才可用。
即return后面的 值的類型
{ x: number, y: number } { selector: string }
string 為to.hash值帶#的
附上小案例
https://hxj886600.github.io/v...
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/88567.html
閱讀 2435·2021-11-18 10:02
閱讀 696·2021-10-08 10:04
閱讀 2272·2021-09-03 10:51
閱讀 3553·2019-08-30 15:44
閱讀 2808·2019-08-29 14:09
閱讀 2474·2019-08-29 12:21
閱讀 2071·2019-08-26 13:45
閱讀 1813·2019-08-26 13:25