前提:之前寫過關於keep-Alive組件,來實現在列表頁進入詳情頁後,後退,返回列表,顯示上次訪問的位置(原理就是緩存列表頁數據來實現),目前發現另外一個問題,就是如果後臺操作改變數據的狀態,緩存的辦法就會導致數據更新不及時導致一些頁面錯誤(例如:商品疑問,在後臺答覆之後,不可以修改內容,前臺更新不及時就會導致,前臺顯示可編輯,但實際狀態是不可編輯了),所以又繼續研究另外一種解決辦法,scrollBehavior 來實現。
簡介:使用前端路由,當切換到新路由時,想要頁面滾到頂部,或者是保持原先的滾動位置,就像重新加載頁面那樣。 vue-router 能做到,而且更好,它讓你可以自定義路由切換時頁面如何滾動。
注意: 這個功能只在支持 history.pushState 的瀏覽器中可用。
官方文檔簡介:滾動行爲
使用方法:
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滾動到哪個的位置
}
})
或者集成模式寫法:
utils.js
export function scrollBehavior (to, from, savedPosition) {
// return 期望滾動到哪個的位置
}
index.js
import Vue from 'vue'
import Router from 'vue-router'
import { scrollBehavior } from './utils'
Vue.use(Router)
const router = new Router({
mode: 'history',
scrollBehavior,
routes: [
...routesPC,
...routesMO
]
})
export default router
scrollBehavior 方法接收 to 和 from 路由對象。第三個參數 savedPosition 當且僅當 popstate 導航 (通過瀏覽器的 前進/後退 按鈕觸發) 時纔可用。
在該方法內,可以通過判斷路由to,from兩個對象來做一些必要的判斷;
savedPosition 參數是記錄的上次滾動的位置;
通過return {x:number,y:number}來控制頁面滾動的位置;
對於所有路由導航,簡單地讓頁面滾動到頂部。
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
想要在後退時,滾動到上次滾動的位置,如果滿足條件,savedPosition有值的情況下:
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
新增情況:異步滾動
當頁面數據需要請求加載有延遲的情況下,頁面如果直接滾動,會出現滾動後,頁面數據請求回來,DOM重新渲染,滾動失效的情況;
所以官方文檔給補充了異步滾動的方法:
scrollBehavior (to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ x: 0, y: 0 })
}, 500)
})
}
這個會在返回後,有一定延遲再滾動,可以根據自己項目的具體情況進行一定修改,兼容;
注:我的項目mobile端數據加載使用的是vue-mugen-scroll滑動加載數據組件,網上沒找到能觸發它加載的方法,所以,在返回列表頁後,數據刷新,只有一頁數據,滾動到底,也找不到上次的數據,嗚嗚嗚......所以還是沒有解決我的問題,但是這個方法是很好的,只是使用情況,會有限制,記錄一下,以備後用。