vue缓存页面和返回跳到相应的位置。

运用场景： 需要缓存的页面， 比如非常常见的新闻资讯页面。

那么首先怎么做缓存好点：

vue做缓存页面还是比较简单的，就利用 keep-alive 组件就可以达到了。 而单独页面做缓存也是有几种方式，我这里就举例一种我经常使用的一个方法，其他的就自己去百度咯。

App.vue 为例。

<transition name="fade">
  <keep-alive include="news_index">
    <router-view/>
  </keep-alive>
</transition>

这里要特别说明下：

include里面放的是组件的name，不是router 里面的name,一般一开始用都容易疏忽了，以为都不生效的问题。

然后接下来就在那个缓存页面 beforeRouteLeave 记录滚动行为，如下：

beforeRouteLeave(to, from, next) {
          // 组件离开的时候，获取页面滚动高度
          this.offsetTop = document.querySelector('#app').scrollTop
          next()
        },

然后activated（只有缓存页面才有这个声明周期）周期中告诉页面滚动到相应的位置就可以了。

activated() {
          setTimeout(()=>{
            this.$nextTick(() => {
              document.querySelector('#app').scrollTop = this.offsetTop;
            });
          },10)
        },　　

这里要说明下：

因为滚动属性 scrollTop 在手机端有的人为什么一直都0（pc端就没什么烦恼，都可以用）.这个也是有原因的。一开始我也是

document.querySelector('body').scrollTop
苹果手机还行，能正常拿到值，而在安卓，蛋疼都是0， 最后body也是可以搞定，但是最后我觉得还是用app来搞定好点。 就是让app也变成滚动，overflow-y:scroll .然后设好高度。 代码如下：

body,html{
    height:100%;
}
#app{
    height:100%;
     100%;
    overflow-y: scroll;
  }

　这样就可以正常获取滚动的数值了。 然后就可以让缓存的页面滚动起来了。