vue中返回上一頁時，頁面停留在上次瀏覽位置

有時候會有這種情況。從列表頁面進入詳情頁面，然後點選返回的時候，我們的介面會重新呼叫，頁面也會跑到頂部，這樣使用者體驗是很不好的，每次使用者都得從上往下從新翻，下面就給大家介紹如何解決這種問題；

Vue 提供的方法

當建立一個 Router 範例，你可以提供一個 scrollBehavior 方法：
注意: 這個功能只在支援 history.pushState 的瀏覽器中可用。

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

scrollBehavior 方法接收 to 和 from 路由物件。第三個引數 savedPosition 當且僅當 popstate 導航 (通過瀏覽器的前進/後退按鈕觸發) 時才可用。
這種方法只有當body或window發生捲動是才會記錄頁面的捲動距離（個人認為是這樣，因為在我的專案中沒有使用成功！！！！）
那如果我的頁面是有上、中、下三個盒子組成，上下定高，中間可捲動，我現在只想記錄中間盒子的捲動距離，要如何去做呢？下面詳解
因為涉及到多個元件的切換，所以用vuex來管理這個數值

export default new Vuex.Store({
    state: {
        scrollH: 0,
    },
    mutations: {
        scrollChange(state, val) {
            state.scrollH = val;
     },
      
})

捲動時觸發scrollChange函數

 that.$store.commit('scrollChange',scrollTopH);

當從詳情頁面，回到前一頁，並想讓其保留在之前的位置，可以在想要捲動的頁面執行

activated(){
        // 等到DOM更新完成之後，然後，執行this.$nextTick，類似於Promise then()
        this.$nextTick(() => {
            this.$refs.pags.scrollTo(0, this.scrollH);
            //  this.$refs.pags.scrollTo(0, this.scrollH);
            // console.log('你好嗎',this.scrollH);
        })
    },

activated()：

activated()在vue物件存活的情況下，進入當前存在activated()函數的頁面時，一進入頁面就觸發；可用於初始化頁面資料、keepalive快取元件後，可執行方法；

deactivated()：離開元件時執行；

注意：activated()和deactivated()只有在包裹的時候才有效；

this.$nextTick()
Vue 在更新 DOM 時是非同步執行的，為了在資料變化之後等待 Vue 完成更新 DOM，可以在資料變化之後立即使用 Vue.nextTick(callback)。這樣回撥函數將在 DOM 更新完成後被呼叫。

如果你只想讓從詳情頁回來時，保持上次的狀態，新增個路由守衛即可

//如果不是從詳情頁進入，則就使捲動高度為0
   beforeRouteLeave (to, from, next){
     if(to.name!="Detail"){
       this.$store.commit("scrollChange",0)
     }
     next()
   },

注意：
元件內的守衛

beforeRouteEnter (to, from, next)
不！能！獲取元件範例 this，因為當守衛執行前，元件範例還沒被建立

beforeRouteUpdate (to, from, next)

  在當前路由改變，但是該元件被複用時呼叫
 可以存取元件範例 `this`

beforeRouteLeave (to, from, next)

 導航離開該元件的對應路由時呼叫，可以存取元件範例 `this`