vue返回记住滚动条位置

assets/js/common.js

export const Storage = {
    set: function (key, data) {
      return window.localStorage.setItem(key, JSON.stringify(data))
    },
    get: function (key) {
      return JSON.parse(window.localStorage.getItem(key))
    },
    remove: function (key) {
      return window.localStorage.removeItem(key)
    },
    setSession: function (key, data) {
      return window.sessionStorage.setItem(key, JSON.stringify(data))
    },
    getSession: function (key) {
      return JSON.parse(window.sessionStorage.getItem(key))
    },
    removeSession: function (key) {
      return window.sessionStorage.removeItem(key)
    },
    clear: function () {
      sessionStorage.clear()
      localStorage.clear()
    }
  }

main.js引入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import { Storage } from './assets/js/common'

// 绑定vue原型链
Vue.prototype.Storage = Storage

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

index.vue

<template>
  <div id="index">
    <div class="hot">
      <div class="hot-text">热门</div>
      <div class="hotBar">
        <div class="hot_item">
          <div class="hot-item-content" @click="toHotPage('/next')">
            <div><img src="../../../static/img/[email protected]" alt=""></div>
            <p>1111</p>
          </div>
          <div class="hot-item-content" @click="toHotPage">
            <div><img src="../../../static/img/[email protected]" alt=""></div>
            <p>2222</p>
          </div>

          <div class="hot-item-content" @click="toHotPage">
            <div><img src="../../../static/img/hotbaricon@(6).png" alt=""></div>
            <p>3333</p>
          </div>

          <div class="hot-item-content" @click="toHotPage">
            <div><img src="../../../static/img/hotbaricon@(1).png" alt=""></div>
            <p>4444</p>
          </div>
          <div class="hot-item-content" @click="toHotPage">
            <div><img src="../../../static/img/hotbaricon@(5).png" alt=""></div>
            <p>5555</p>
          </div>

          <div class="hot-item-content" @click="toHotPage">
            <div><img src="../../../static/img/hotbaricon@(3).png" alt=""></div>
            <p>6666</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    toHotPage (el, val) {
      let left = el.currentTarget.parentElement.parentElement.scrollLeft
      this.Storage.removeSession('hotScroll')
      this.Storage.setSession('hotScroll', left)

		this.$router.push({path: val})
     
    },
  },
  mounted () {

    if (this.Storage.getSession('scrollX')) {
      let div = document.getElementsByClassName('navbar')[0]
      div.scrollLeft = this.Storage.getSession('scrollX')
    }

    if (this.Storage.getSession('hotScroll')) {
      let div = document.getElementsByClassName('hotBar')[0]
      div.scrollLeft = this.Storage.getSession('hotScroll')
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../assets/css/base.less";
#index {
  background-color: #f5f5f5;

  

  .hot {
    width: 7.5rem;
    height: auto;
    background-color: #fff;
    margin-top: .3rem;

    .hot-text {
      text-align: left;
      padding: .3rem;
      font-size:.40rem;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(51,51,51,1);
      border-bottom: .01rem solid #E6E6E6;
    }
    .hotBar {
      padding: .3rem;
      overflow-x: scroll;

      .hot_item {
        display: inline-flex;

        .hot-item-content {
          padding-right: .8rem;
          width: auto;
          height: auto;

          img {
            width: .9rem;
            height: .9rem;
            margin-bottom: .16rem;
          }
          p {
            font-size:.28rem;
            font-family:PingFang-SC-Regular;
            font-weight:400;
            color:rgba(51,51,51,1);
            white-space:nowrap; 
          }
        }
        .hot-item-content:last-child {
          padding-right: 0;
        }
      }
    }
  }
}
</style>