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

      }



    }