vue 路由切換白屏解決方案

關於vue 路由切換的白屏，事實上在開發的過程中，我一直沒有遇到過。

我有個哥們遇到這個問題，問我怎么解決的， 我暈了，我沒遇到這樣的問題啊，我怎么解決啊啊啊啊。。

事實上是遇到過一回的。

場景一：IE9

嚴格來說不是白屏的問題，應該說是兼容性問題，直接就是不支持，報錯了，渲染無法執行造成的。解決方式就是

npm i babel-polyfill -D

然后在入口mian.js 引入就完事了，就着么簡單

import 'babel-polyfill'

有人說是在iphone 5s 或者6s 上會出現這種問題，肯定不是手機的bug。於是我重現了場景，真的和設備無關

場景二 ：如下圖

所以這個跟設備真的沒有關系。知道問題所在，當然解決辦法也有許多

方案一：暴力愚蠢型

//路由跳轉前滾動條清零
document.body.scrollTop = document.documentElement.scrollTop = 0
this.$router.push({path:'/a/b/c'})

方案二：可行但不可選型

//給router 加一個監聽，一旦改變，執行清零，然后再跳轉
let routers = new Router({.....})
routers.beforeEach(function (to, from, next) { 
    ......
    document.body.scrollTop = document.documentElement.scrollTop = 0
    next()
})

雖然可行，但是感覺着么干有點愚蠢。因為還有更好的寫法，這個寫法更佳優雅

方案三：最佳型

其實官方已經提供了當路由切換時，控制滾動位置的方式。scrollBehavior

使用方式如下：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滾動到哪個的位置 { x: number, y: number } |  { selector: string } |
  }
})

scrollBehavior 方法接收 to 和 from 路由對象。第三個參數 savedPosition 當且僅當 popstate 導航 (通過瀏覽器的 前進/后退 按鈕觸發) 時才可用。

所以假如要解決白屏的問題，可以着么干

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    return savedPosition || { x: 0, y: 0 }
  }
})

也就是說，當用戶點擊返回、前進 的時候，頁面會滾動到之前 位置，(微信朋友圈的文章就是這樣的，讀一半返回，再進來接着剛才的位置閱讀)

如果是新的page 被 mounted 進來的時候，就重置為0 。

完美的解決了這個問題。

但是這也是個問題，框架為什么不默認呢，假如自定義的時候可以 overwirte。

[完]