一个vue中简单地list页面切换到detail，返回到list滑动位置的解决方式

版本vue-cli3+

在vue中，我们一般都会遇到这样的场景：

从列表页切换到详情页，返回到列表页的时候，需要列表位置还在原先进入详情的时候的位置。

首先，对于列表页，我们应该做缓存处理，关于路由的缓存，可以参考这篇文章：路由缓存

而在list页面，我们可以简单的通过下面方式来做到，利用router的beforeEnter和beforeLeave钩子：

第一步，在data中定义要保存的位置信息：

data(){
  return {
    scrollPos: 0
  }
}

第二步：写钩子函数处理位置存留信息（和method同级）：

beforeRouteEnter(to, from, next) {
    next(vm => {
      if(vm.$refs.outer) {
        const div = vm.$refs.outer
        div.scrollEventTarget.scrollTop = vm.scrollPos 
      }
    })
  },
  beforeRouteLeave(to, from, next) {
    const div = this.$refs.outer
    this.scrollPos = div.scrollEventTarget.scrollTop
    next()
  }

在这方法里面，我们可以看到使用了ref，这里的outer指代的是scroll内容的外层包裹div，也可以是某个滑动组件。

<div ref="outer">
  xxxx //列表内容
</div>