vue单页设置页面不刷新 记录滚动条的位置

功能需求

点击商城第三级分类节点进入商品列表页，然后点返回按钮时页面重新回到了第一个一级分类节点的三级节点下。但需要的效果是返回到当前的三级分类节点（页面在底部）。

vue单页 使用keep-alive页面返回不刷新

法1：设置所有页面进入分类页时都缓存（已试过成功）

keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

1.在配置router的文件中设置分类页的keepAlive为true

2.将app.vue文件设置为

<template>
  <div id="app" class="tap-highlight">
    <!-- 可以被缓存的视图组件 -->
    <kkeep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <!-- 不需要被缓存的试图组件 -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
<script>
export default {
  name: 'app',
};
</script>

这样分类页在首次加载缓存后再进入就不会重复刷新获取数据

3.在分类页的vue文件中

  <!-- 一级类目 -->
      <div class="cate-side ovy-scroll" id="js_scroll_cate" ref="firstWrapper">

 <!-- 子类目start -->
      <div v-if="secondCategoryLst.length > 0" class="cate-main ovy-scroll" id="js_scroll_main"  ref="secondWrapper">

这里是有左右两个滚动条，我需要记住滚动条的位置，每次返回还是在原来的位置上，便于继续浏览。

4.由于设置了keep-alive属性，页面数据不会刷新，这里设置每次路由离开的时候记录两个滚动条的位置，将其赋给data中定义的firstScrollTop，secondScrollTop

 beforeRouteLeave (to, from, next) { 
      this.firstScrollTop = this.$refs.firstWrapper.scrollTop;
      this.secondScrollTop = this.$refs.secondWrapper.scrollTop;
        next();
 },

5.当页面返回时在activated中赋给对于滚动条

  activated() {
    if(this.firstScrollTop > 0){
      this.$refs.firstWrapper.scrollTop = this.firstScrollTop;
    }
     if(this.secondScrollTop > 0){
      this.$refs.secondWrapper.scrollTop = this.secondScrollTop;
    }
    },

法2：设置只有商品列表进入分类页时缓存，其他页面进入刷新（没有实际操作）

这里1.2.3步都与上面相同，

4.设置每次路由离开的时候记录两个滚动条的位置将其保存到store全局变量

5.在分类页路由离开时设置keepAlive为false，activated中不是将data中的值赋给this.$refs.firstWrapper.scrollTop，是将store中保存的赋值，因为将keepAlive设为false，this.firstScrollTop从其他页面进入后不会保存。

6.在商品列表页判断当路由离开时当前路由是商品列表页，进入的是分类页时设置分类页keepAlive的值为true

我的博客主页 ：https://qingmuzhang.gitee.io/