vue记录当前的页面位置，路由切换时保持位置

通过监听scrollTop的位置，来实现
运用LocalStorage来存储和读取

.book-list {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    // overflow: auto;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
      display: none;
    }

页面vue书写写

 <div class="book-list" ref="bookListWrapper">
</div>
//得到缓存的值存储
import Storage from "web-storage-cache";
const localStorage = new Storage();

export function setLocalStorage(key, value) {
  return localStorage.set(key, value);
}
//通过key获取某个值
export function getLocalStorage(key) {
  return localStorage.get(key);
}

mounted() {  
         // 获取到元素bookListWrapper，监听scroll，传入函数this.handleScroll
    this.$refs.bookListWrapper.addEventListener("scroll", this.handleScroll);
    // 根据本地缓存取出初始值并渲染页面
    this.rememberScroll = getLocalStorage("offsetY");
    this.$refs.bookListWrapper.scrollTo(0, this.rememberScroll);
  },

 //实例销毁之前调用
  beforeDestroy() {
    if (this.rememberScroll) {
      setLocalStorage("offsetY", this.rememberScroll);
    } else {
      setLocalStorage("offsetY", 0);
    }
  },

methods:{
 handleScroll(e) {//vue 方法中可直接加e获取event，当@click方法不加括号默认传event参数。       
      const target = e.target; //获取元素目标
      if (target) {
        this.rememberScroll = target.scrollTop;//获取离页面上方高度
        console.log(this.rememberScroll);
      } else {
        this.rememberScroll = 0;
      }
    },
}