vue实现返回上页滚动条位置

先捋一下思路，对于上页记录滚动条位置首先会用到储存来保存滚动条离开时位置，项目中用到时sessionStorage，在进入页面的时候要从存储中取一下滚动条位置，虽然vue提供history模式，在此模式下有实现的方法，但history 模式对于项目放在非根域名地址下是会有很多需要调试配置路径的问题，所以这里主要不用history模式
因此实现效果就用到vue 中的内置组件keep-alive，keepAlive不仅能在组件切换过程中将状态保留在内存中，而且防止重复渲染DOM;

1.在路由配置页面中，给需要保留状态的路由地址配置keep alive：true，代码附上：

 // 新闻首页
    {
      path: '/',
      name: 'Newshome',
      component: resolve => require(['@/components/newshome/index'], resolve),
      meta: {keepAlive: true}
    },

2.在App.vue中给用到的keepAlive加上keepAlive 标签，代码如下：

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

3.在记录列表页面使用 beforeRouteEnter 和 beforeRouteLeave方法来实现，代码：

//html代码

 <ul ref="my_scroller1" id="newshome23"  style="width: 100%;display: inline-block;height:100%;overflow: auto;font-size: 14px;-webkit-overflow-scrolling : touch; "
                v-infinite-scroll="loadMore"
                infinite-scroll-disabled="isMoreLoading"
                infinite-scroll-distance="10"
                :infinite-scroll-immediate-check="true"
                class="newsList">
              <pull-refresh :refreshing="isRefreshing" :on-refresh="onRefresh" pull-height="100%">
                <div class="headlist" >
                  <div v-for="(list,index) in conli" :key="index">
                    <!--第一类-->
                    <div class="headlistone" @click="godetail(list.id)" v-if="list.mychannel === 1">
                      <div class="title">{{list.title}}</div>
                      <div class="content">{{list.description}}</div>
                      <div class="time">{{list.source}} {{list.pingNum}}评价 {{list.create_time}}</div>
                    </div>

                    <!--第四类-->
                    <div class="headlistone" @click="gospdetail(list.id)" v-if="list.mychannel === 3">
                      <div class="title" v-if="list.title !== ''">{{list.title}}</div>
                      <div class="title" v-else>{{list.description}}</div>
                      <div>
                        <img style="width: 100%;" :src="list.image" alt="">
                        <!--<video id="video" width="100%" height="" :src="list.video" autobuffer οnclick="play()">-->
                        <!--</video>-->
                      </div>
                      <div class="time">{{list.source}} {{list.pingNum}}评价 {{list.create_time}}</div>
                    </div>
                    <!--第三类-->
                    <div class="headlistone" @click="godetail(list.id)" v-if="list.mychannel === 1&&list.imagesArticleList !==undefined &&list.imagesArticleList.length>=0">
                      <div class="title">{{list.title}}</div>
                      <div class="threeimg clear">
                        <img v-for="(img,imgindex) in list.imagesArticleList" :key="imgindex" :src="img" alt="" />
                      </div>
                      <div class="time">{{list.source}} {{list.pingNum}}评价 {{list.create_time}}</div>
                    </div>
                    <!--广告-->
                    <div class="headlistone" v-if="list.mychannel === 99">
                      <div class="title">{{list.title}}</div>
                      <div class="threeimg clear">
                        <a :href="list.url" v-if="list.url !== ''">
                          <img :src="list.image" alt="" style="width: 100%;" />
                        </a>
                        <a v-else>
                          <img :src="list.image" alt="" style="width: 100%;" />
                        </a>
                      </div>
                      <div class="time"><span style="margin-right: 10px;border: 1px solid #66ccff;border-radius: 5px ;padding: 2px 5px;">广告</span>{{list.source}}</div>
                    </div>
                    <!--第二张-->
                    <div class="headlistone clear" @click="godetail(list.id)" v-if="list.mychannel === 2">
                      <div class="twoleft">
                        <div v-html="list.description"></div>
                        <div class="time">{{list.source}} {{list.pingNum}}评价 {{list.create_time}}</div>
                      </div>
                      <div class="tworight">
                        <img :src="list.image" alt="">
                      </div>
                    </div>
                  </div>

                </div>
              </pull-refresh>
              </ul>

//判断是否跳转过

// 跳转详情
    godetail (id) {
      sessionStorage.setItem('detailid',1)            //这个存储是用来判断是不是跳转进入详情
      this.$router.push('/home/newsdetail?id=' + id)
    },

//返回到列表页面

beforeRouteEnter(to,from,next){
    console.log(from.path,to.path,next.path ,sessionStorage.getItem('detailid'))
    if(sessionStorage.askPositonhome && from.path == '/home/newsdetail' && sessionStorage.getItem('detailid')== 1 ){//当前页面刷新不需要切换位置
      next(vm => {   //beforeRouteEnter中不能用this做指向，要用vm;
        if(vm && document.getElementById('newshome23')){//通过vm实例访问this
          console.log(sessionStorage.askPosito)
          document.getElementById('newshome23').scrollTo(0, sessionStorage.askPositonhome, true);
          setTimeout(function () {
            document.getElementById('newshome23').scrollTo(0, sessionStorage.askPositonhome, true);
          },0)//同步转异步操作tTime
        }
      })
    }else if(sessionStorage.askPositonhome){
      next(vm => {
        if(vm && document.getElementById('newshome23')){//通过vm实例访问this
          console.log(sessionStorage.askPosito)
          document.getElementById('newshome23').scrollTo(0, sessionStorage.askPositonhome, true);
          setTimeout(function () {
            document.getElementById('newshome23').scrollTo(0, sessionStorage.askPositonhome, true);
          },0)//同步转异步操作tTime
        }
      })
    } else{
      sessionStorage.askPositonhome = '';
      next(vm => {
        vm.oneisSign()            //去签到
      });
      // console.log(11)

    }
  },

//离开页面记录滚动条位置

beforeRouteLeave(to,from,next){//记录离开时的位置
    console.log( document.getElementById('newshome23').scrollTop)

    sessionStorage.askPositon = document.getElementById('newshome23').scrollTop;
    sessionStorage.setItem('askPositonhome',document.getElementById('newshome23').scrollTop)
    next()
  },

以上便是项目中实际用到存储滚动条位置，希望可以帮到你！！！