vue keep-alive移动端详情返回列表记录滚动条位置

移动端详情返回列表页时，记录滚动条位置，踩了不少坑之后，终于有效解决，特此记录

要用到keep-alive缓存，及缓存时用到的activated和deactivated两个生命周期函数

1:首页在App.vue和路由中配置keep-alive缓存

 <div id="app">
    <!--根据keepAlive，判断页面是否需要缓存-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>

router中

 {
    path: '/app/checkList',
    name: 'checkList',
    // 加入keepAlive,不需要缓存的页面不用加
    meta: {
      keepAlive: true
    },
    component: () => import('@/views/checkList/checkList.vue')
  },

2.列表-list页面：页面用的vantUI的list，如果是其他标签，只需要找到对应的scrollTop就可

点击列表项进入详情时，保存scrollTop，从详情返回列表时，列表数据已被缓存，只需要重新设置scrollTop，就可以记录位置

    jumpDetail (type, item) {
      this.$route.meta.keepAlive = true
      let vanTabs = this.$refs.vanTabs.scroller.scrollTop;
      // 由于有缓存，直接保存在data中就可以，数据并不会丢失
      this.scroll = vanTabs
      this.$router.push({
          name: 'warnDetail',
          query
      })
    }

         <van-pull-refresh v-model="noRefresh" @refresh="noList" ref="pullItem">
            <van-list
              v-model="no.loading"
              :finished="no.finished"
              finished-text="没有更多了"
              @load="onLoadNo"
              ref="vanList"
            >
              <div @click="jumpDetail"></div>
            </van-list>
          </van-pull-refresh>

3.进入页面时保存上一个页面的路由名字，如果是来自详情页，就重新赋值

  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.beforeUrl = from.name
    })
  },

  activated () {
    // 必须要在nextTick中，不然获取到的上个页面是上上个页面
    this.$nextTick(() => {
      if (this.beforeUrl === 'appHome') {
        this.$route.meta.keepAlive = false
      } else {
        this.$refs.vanTabs.scroller.scrollTop = this.scroll
        console.log(this.$refs.vanTabs.scroller.scrollTop)
      }
    })

3.以上代码，会造成首次进入列表页时，不会重新加载数据，也是用的缓存数据

所以在离开页面时，要判断，如果去的是详情页，把keepAlive改成true，如果去的是其他页面，keepAlive改为false

此时就完美的实现了详情返回列表时保存滚动条位置

  beforeRouteLeave (to, from, next) {
    // 去的不是详情页，不需要缓存
    if (to.name === 'appHome') {
      this.$route.meta.keepAlive = false
    }
    next();
  },