vue+webpack+ES6,怎样记录滚动条的位置

Question

一个很常见的列表，比如说用户滚动到了某个位置，然后点击导航通过vue-router进行了跳转。想点击返回的时候返回上一页的时候直接到用户滚动的位置，请问如何操作？

看到了vue-router上的saveScrollPosition，但是没有实例不知道具体怎么使用，各位前辈如果知道某个项目解决了这个问题可以吧git地址发一下，辛苦了。

Answer 1

var router = new VueRouter({
    hashbang: false,
    history: true,
    saveScrollPosition: true,
    suppressTransitionError: true
})

saveScrollPosition一定要在history模式下才有效.

Answer 2

如果你的页面是单页应用，Vuet可以实现你的需求

import Vue from 'vue'
import Vuet from 'vuet'
Vue.use(Vuet)

const vuet = new Vuet({
  modules: {
    testModule: {
      data () {
        return {}
      }
    }
  }
})


new Vue({
  // ...
  vuet,
  template: `
    <div v-vuet-scroll.self="{ path: 'testModule',  name: '随便给一个名字' }"></div>
  `
})

如果你需要记录多个滚动条，调用多次v-vuet-scroll这个指令，设置不同的名字即可

Answer 3

如果使用的是vue router hash 模式
使用keepAlive会出现子页面返回滚动条记录不准确
可以利用本地存储
` setScroll: function () {

  // 定义一个保存坐标的方法
  let oTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
  sessionStorage.setItem(this.$route.fullPath, oTop)
}

beforeDestroy: function () {

// 页面销毁时清除坐标
sessionStorage.removeItem('/pack')

},
activated: function () {

let oHref = this.$route.fullPath
// 检查有没有坐标 如果有就跳转到
if (sessionStorage.getItem(oHref)) {
  let timer = setInterval(function () {
    let scrollData = sessionStorage.getItem(oHref)
    document.documentElement.scrollTop = scrollData
    document.body.scrollTop = scrollData
    clearInterval(timer)
    sessionStorage.removeItem('/pack')
  }, 600)
}

},`