在vuejs裏，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣（借用vuejs官方文檔一句話）；但是官方文檔使用路由，來控制滾動行為是建立在HTML5 history模式下的(參考這裏)，但是本人最開始就沒有使用這種模式，如果在修改項目的話，太耗時，想按現在這種非history的條件下，實現頁面滾動位置的記錄。

　　其實最核心的就是記錄滾動的位置，讓後保存，在頁面回退的時候，讓頁面滾動到指定位置即可。但是需要註意的鉤子函數的時候。因為這裏使用了keep-alive來緩存頁面，所以第一次獲取頁面滾動的距離和第二次回退獲取頁面滾動的距離，寫在了不同的鉤子函數。

　　下面是原型圖：（因為這是pad上的，移動端樣式有點問題）

　　上面的頁面，有個無線加載的功能，我們這裏怎麽獲取滾動的距離呢？在哪個鉤子裏實時的獲取滾動的高度呢（內容區域可以滾動）？在初始化vue組件的時候，created，mounted這些鉤子在頁面渲染完後，就不會再觸發了。我們獲取頁面的高度，也就是獲取內容區域盒子的高度，在vuejs裏我們通過使用 $ref 的方式來定位dom。在vuejs裏還有鉤子函數updated 是能實時的獲取$ref 的高度，當頁面dom更新的時候，就會觸發updated這個鉤子函數，具體參考vuejs官網；

　　在updated 鉤子函數裏獲取滾動的距離：

updated(){
      let scroll = this.$refs.list.scrollTop;
      sessionStorage.setItem(‘scroll‘,scroll);
}

　　　但是updated鉤子只會在第一次進入的時候執行一次，因為該頁面使用了keep-alive把頁面緩存下來了，如果不清楚，請參考這裏，那麽以後怎麽獲取滾動的距離呢，雖然使用了keep-alive不會觸發updated這個鉤子函數，但是會觸發activated，和deactivated 這兩個鉤子函數。activated這個鉤子函數是返回頁面就會加載，deactivated 這個鉤子函數，在頁面跳轉前會觸發，那麽我們只要在頁面跳轉前獲取到滾動的距離，然後緩存下來就可以了。

　　在deactivated 鉤子函數獲取滾動的距離：

deactivated(){
      let scroll = this.$refs.list.scrollTop;
      sessionStorage.setItem(‘scroll‘,scroll); 
}

　　和updated鉤子函數獲取的方式是一樣的。但是我們不需要擔心，回退後，就不會觸發updated這個鉤子函數了。

　　這個時候，我們只需要在回退頁面觸發activated這個鉤子函數，把滾動的位置賦值就可以了。（註意類型的轉換，保存成string，要轉化為number）

　　在activated鉤子函數賦值滾動的距離：

activated(){
      const scroll = sessionStorage.getItem(‘scroll‘);
      this.$refs.list.scrollTop = parseInt(scroll);
}

　這個只是嘗試非history的模式下，采用緩存的方式獲取頁面的滾動。以後寫個demo，寫下關於histroy模式下，定位頁面的滾動的距離。

vuejs在不使用history的情況下，回退返回到之前滾動的位置