Vue scrollBehavior 滾動(dòng)行為，實(shí)現(xiàn)后退頁(yè)面顯示在上次瀏覽的位置

BaronZhang 發(fā)布于2019-08-26 13:56 / 2442人閱讀

摘要：注意這個(gè)功能只在支持的瀏覽器中可用。官方文檔簡(jiǎn)介滾動(dòng)行為使用方法期望滾動(dòng)到哪個(gè)的位置或者集成模式寫法期望滾動(dòng)到哪個(gè)的位置方法接收和路由對(duì)象。

前提：之前寫過(guò)關(guān)于keep-Alive組件，來(lái)實(shí)現(xiàn)在列表頁(yè)進(jìn)入詳情頁(yè)后，后退，返回列表，顯示上次訪問(wèn)的位置（原理就是緩存列表頁(yè)數(shù)據(jù)來(lái)實(shí)現(xiàn)），目前發(fā)現(xiàn)另外一個(gè)問(wèn)題，就是如果后臺(tái)操作改變數(shù)據(jù)的狀態(tài)，緩存的辦法就會(huì)導(dǎo)致數(shù)據(jù)更新不及時(shí)導(dǎo)致一些頁(yè)面錯(cuò)誤（例如：商品疑問(wèn)，在后臺(tái)答復(fù)之后，不可以修改內(nèi)容，前臺(tái)更新不及時(shí)就會(huì)導(dǎo)致，前臺(tái)顯示可編輯，但實(shí)際狀態(tài)是不可編輯了），所以又繼續(xù)研究另外一種解決辦法，scrollBehavior 來(lái)實(shí)現(xiàn)。

簡(jiǎn)介：使用前端路由，當(dāng)切換到新路由時(shí)，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣。 vue-router 能做到，而且更好，它讓你可以自定義路由切換時(shí)頁(yè)面如何滾動(dòng)。

注意: 這個(gè)功能只在支持 history.pushState 的瀏覽器中可用。
官方文檔簡(jiǎn)介：滾動(dòng)行為

使用方法：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滾動(dòng)到哪個(gè)的位置
  }
})

或者集成模式寫法：

utils.js

export function scrollBehavior (to, from, savedPosition) {
  // return 期望滾動(dòng)到哪個(gè)的位置
}

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 路由對(duì)象。第三個(gè)參數(shù) savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (通過(guò)瀏覽器的前進(jìn)/后退按鈕觸發(fā)) 時(shí)才可用。
在該方法內(nèi)，可以通過(guò)判斷路由to,from兩個(gè)對(duì)象來(lái)做一些必要的判斷；
savedPosition 參數(shù)是記錄的上次滾動(dòng)的位置；
通過(guò)return {x:number,y:number}來(lái)控制頁(yè)面滾動(dòng)的位置；

對(duì)于所有路由導(dǎo)航，簡(jiǎn)單地讓頁(yè)面滾動(dòng)到頂部。

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

想要在后退時(shí)，滾動(dòng)到上次滾動(dòng)的位置，如果滿足條件，savedPosition有值的情況下：

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

新增情況：異步滾動(dòng)

當(dāng)頁(yè)面數(shù)據(jù)需要請(qǐng)求加載有延遲的情況下，頁(yè)面如果直接滾動(dòng)，會(huì)出現(xiàn)滾動(dòng)后，頁(yè)面數(shù)據(jù)請(qǐng)求回來(lái)，DOM重新渲染，滾動(dòng)失效的情況；
所以官方文檔給補(bǔ)充了異步滾動(dòng)的方法：

scrollBehavior (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ x: 0, y: 0 })
    }, 500)
  })
}

這個(gè)會(huì)在返回后，有一定延遲再滾動(dòng)，可以根據(jù)自己項(xiàng)目的具體情況進(jìn)行一定修改，兼容；

注：我的項(xiàng)目mobile端數(shù)據(jù)加載使用的是vue-mugen-scroll滑動(dòng)加載數(shù)據(jù)組件，網(wǎng)上沒(méi)找到能觸發(fā)它加載的方法，所以，在返回列表頁(yè)后，數(shù)據(jù)刷新，只有一頁(yè)數(shù)據(jù)，滾動(dòng)到底，也找不到上次的數(shù)據(jù)，嗚嗚嗚......所以還是沒(méi)有解決我的問(wèn)題，但是這個(gè)方法是很好的，只是使用情況，會(huì)有限制，記錄一下，以備后用。