vue router 應用案例（一）記錄滾動條位置

方法1：

1. 在router.js裏面（即路由文件中），此時模式爲 history（注意爲history 模式下）

const router = new VueRouter({
  mode: 'history',
  routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      if (from.meta.keepAlive) {
        from.meta.savedPosition = document.body.scrollTop // 此處爲記錄的滾動條位置
      }
      return { x: 0, y: to.meta.savedPosition || 0 }
    }
  }
})

2. keep-alive

meta: {
      title: 'home',
      keepAlive: true
    }

3. 頁面加載路由的地方

<keep-alive >
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

注意： 位置確實記錄上了(加緩存，返回不刷新頁面)，也就是說，返回不觸發created。存在修改信息的頁面不會及時更新數據

方法2：scrollBehavior

1. 同樣爲history 模式下

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

從詳情頁面返回 使用 history.back(）

方法3：

1. 在hash 模式下

// route中的data鉤子， 需要在離開頁面前手動保存滾動條位置
route : {
  data : function () {
    var _this = this;
    // 返回同一個位置
    var scrollTop = sessionStorage.getItem("scrollTop");
    if (scrollTop) {
      _this.$nextTick(function () {
              $(dom).scrollTop(scrollTop);
      });
    }
  }
}

下一個方法類似都是在離開前 保存
在進入時讀取

方法4：

beforeRouteLeave(to, from, next){
  let position = window.scrollY()
  this.$store.commit('SAVE_POSITION', position) //離開路由時把位置存起來
  next()
}

updated () {
  this.$nextTick(function(){
    let position = this.$store.state.position //返回頁面取出來
    window.scroll(0, position)
  }) 
}

//組件內的守衛
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 通過 `vm` 訪問組件實例
      vm.$nextTick(function(){
        let position = vm.$store.state.position //返回頁面取出來
        console.log("beforeRouteEnter moments update: ", position);
        window.scroll(0, position)
        // setTimeout(function(){window.scroll(0, position)},1000)
      })
    })
  }