1.给 router-view 添加 keep-alive

2.获取并存储当前 scrollTop

3.返回时取出并设置 scrollTop

一、给 router-view 添加 keep-alive

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。所以在由详情页返回列表页时，不让列表页刷新。
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
二、获取并存储当前 scrollTop

        <div class="left1" :style="`width:${config_info['left_width']}%;`"  ref="left1" v-on:scroll="scroll_left()">
          <div class="nav" v-for="(item,index) in catList" :key="index" style="text-align: center;">
            <p style="font-size: 0.825rem;" :class="{'leftcolorchange':leftcolordisplay==index,cate1:1}"
              @click="getList(item.id,item.type,index)">
              {{item.name}}
            </p>
          </div>
        </div>

      scroll_left() {
        let scroll_left1 = this.$refs.left1.scrollTop
        //console.log(scroll_left1);
        //存储 scrollTop 的值
        this.scroll_left1 = scroll_left1;

      },
      scroll_right() {
        let scroll_right1 = this.$refs.right1.scrollTop
        //console.log(scroll_right1);
        //存储 scrollTop 的值
        this.scroll_right1 = scroll_right1;

      }

三、返回时取出并设置 scrollTop

上面已经介绍过了，使用 keep-alive 之后，每次返回页面会调用 activated 生命周期方法，所以在这个方法里设置之前记住的 scrollTop，达到记住滚动位置的效果。

    activated() {
      if(this.$refs.left1){
        this.$refs.left1.scrollTop = this.scroll_left1
        this.$refs.right1.scrollTop = this.scroll_right1
      }

    }