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滑動加載數據組件，網上沒找到能觸發它加載的方法，因此，在返回列表頁後，數據刷新，只有一頁數據，滾動到底，也找不到上次的數據，嗚嗚嗚......因此仍是沒有解決個人問題，可是這個方法是很好的，只是使用狀況，會有限制，記錄一下，以備後用。