Vue scrollBehavior 滾動行為實現后退頁面顯示在上次瀏覽的位置

前提：

之前寫過關于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滑動加載數據組件，網上沒找到能觸發它加載的方法，所以，在返回列表頁后，數據刷新，只有一頁數據，滾動到底，也找不到上次的數據，嗚嗚嗚......所以還是沒有解決我的問題，但是這個方法是很好的，只是使用情況，會有限制，記錄一下，以備后用。

總結

以上所述是小編給大家介紹的Vue scrollBehavior 滾動行為實現后退頁面顯示在上次瀏覽的位置,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！