vue所有页面前进请求数据后退不请求数据保持之前浏览状态包括滑动位置等

Question

求教大神能否实现页面前进请求数据，后退不请求数据，展示之前请求过的数据，包括滚动到跳转前页面的位置，网上铺天盖地的keep-alive方案在移动端会出现各种bug，不行，pc端试没问题。
需求是记录上次页面点的位置，包括分页列表滑动到的位置，tab等

Answer 1

怎么判断是后退到该页面还是点击菜单到该页面，还是说只要非首次进入就不刷新

Answer 2

watch 监听$route 这个思路能解决你的需求嘛

Answer 3

把你需要保存的信息保存到localstorage里，页面加载的时候取一下看看有没有，有的话就用localstorage里的

Answer 4

我keep-alive都用了好几个项目了 也没出现啥 bug啊。。。。

---

我觉得项目用keep-alive 的话 要注意几个问题把

1. 页面状态的重置，特别是表单
2. 之前发现一个问题 三级路由的时候，从这个模块的第三级push到另一个模块的第三级 页面html竟然没变，发现是keep-alive的原因，我是整个项目keep-alive的，具体表现可以看我在github的提问：

https://github.com/vuejs/vue-...
我的解决方案是路由只是用2级，但是为了url看起来比较好看，url表现出来的是三级

优点的话 就是能保存页面状态，就我的项目而言
像是一些首页啊、分类页面啊、个人中心页面等等 这种只用请求一个次的页面 请求事件放在created里面就行

关于楼主说的列表到详情，我一般的做法是把请求函数放在beforeRouteEnter里面，
然后根据条件判断是否要重新加载第一页：
!list.length || from.name != 'xxxx'
(因为我的项目跑在微信浏览器里 所以做list判断是为了解决，如果用户在详情页刷新页面，然后返回到列表页，列表页是空的情况)

关于保存页面滚动位置，我遇到两种情况：

1. 我的列表页面使用的是better-scroll， 我从详情页返回到列表页 列表的移动位置是自动保留的，所以不需要做特殊处理
2. 列表页不需要分页，所以用的是overflow-y:auto，这个是没有保留滚动状态的，所以我的做法是：

vue部分：

beforeRouteEnter(to, from, next) {
  next(vm => {
    if (!vm.hasLoadData) {
      vm.getList()
    }

    if (vm.scrollTop && vm.$refs.scrollBody) {
      vm.$refs.scrollBody.scrollTop = vm.scrollTop        //    设置滚动位置
    }
  })
},
beforeRouteLeave(to, from, next) {
  this.scrollTop = this.$refs.scrollBody.scrollTop        //    保存滚动位置
  next()
},
data() {
  return {
    scrollTop: 0,   //  页面滚动条位置
  }
},

html：

...
<div ref="scrollBody"><!--这个是滚动容器 height: 100vh; overflow-y: auto; -->
    这里是列表内容
</div>
...

以上，如果有啥问题，大家多讨论讨论