vue项目，跳转回来保持数据与滑动位置

在vue项目中，遇到这样的问题：

有一排动态加载的列表，点击进入详情页，然后回退的时候，数据又重新刷新了，里面的筛选条件也没了。

这种时候可以用vuex储存筛选状态，但是最完美的用法是keep-alive

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

比如在项目中列表页PageOrder.vue和详情页PageOrderDetail.vue都是 一个主页OrderView.vue的子页面 那么

OrderView.vue:

路由：

这样就可以保持列表页一直是alive的状态不会被重载。

但是在滑动位置不会被保存，这时候我们需要使用组件内守卫来解决

在PageOrder.vue： （如果是body，则用 document.documentElement.scrollTop || document.body.scrollTop）

beforeRouteLeave (to, from, next) {
    //list元素里进行的滚动，所以用了ref
    this.scrollTop = this.$refs['list'].scrollTop
    next()
  },
beforeRouteEnter (to, from, next) {
    next(vm => {
      if (vm.scrollTop !== 0) {
        vm.$refs['list'].scrollTop = vm.scrollTop
        vm.scrollTop = 0
      }
    })
}

这样就可以搞定了