vue项目中keep-alive的使用，从详情页返回列表时保存浏览位置

最近在作移动端前端项目中，须要实现如下场景：

1.在页面查询列表，进入详情页时，返回须要页面返回到上次浏览的位置

2.因为查询列表获取的数据可能会短期改变，若是前端长时间缓存数据，并不符合业务要求。

3.我在进入详情页时能够修改列表的数据，返回时滚动到，用户看到的应该是最新的数据

4.每一个列表页面须要用到滑动加载更多数据。

项目中vue的使用：

1.用到keep-alive来缓存页面

2.当详情页中改变列表数据时，配合keep-alive,须要在vue钩子函数activated中，对数据进行更改

3.在从其余页面进入时，页面要从新加载数据。页面从列表进入其余页面（非详情页）时，销毁当前的vue实例。此时需用到组件内的路由守卫，beforeRouteEnter和beforeRouteLeave

4.列表页滑动加载

具体实现：

针对以上前三点，页面的缓存，咱们须要用到vue的内置组件keep-alive，来缓存列表页面，同时配合路由选项来更改页面的数据。

在设置keep-alive缓存的组件中，首次进入组件，会一次调用组件的钩子函数：created --> mounted -->activated 再次进入时，只触发activated钩子函数

1.在路由出口渲染组件时配置：

 <keep-alive>
          <router-view v-if="$route.meta.keepAlive" class="router-view">
          </router-view>
      </keep-alive>
     <router-view v-if="!$route.meta.keepAlive" class="router-view" ></router-view>

2.在路由选项中，配置meta属性，keepAlive为true即为须要缓存的组件，同时设置isBack属性，用来标示页面是不是从详情页面返回的。

 

{
          name: '首页',
          path: 'index',
          component: Index,
          meta: {
            keepAlive: true, 
            isBack: false
          }
        }

3.在组件实例中，经过beforeRouteEnter(to, from, next)路由守卫，来判断路由是从哪里跳转的，若是是从详情页跳转的，则将当前路由对象的meta.isBack 设置为true,不然设为false　　

 beforeRouteEnter(to, from, next) {
        if (from.path == "/detail") {
          to.meta.isBack = true;
        } else {
          to.meta.isBack = false;
        }
        next();
      }

为了在其余页面进入时，更新页面中的列表数据，咱们将在activated钩子函数中挂载页面初次进入时的请求数据：　

    if (!this.$route.meta.isBack) {
          this.list = [];
          this.pageNum = 1;
          this.getList();
        }
        this.$route.meta.isBack = false;
      }

4.在进入详情页，须要对该条数据进行修改时，修改为功后返回，应该更新列表。

因为咱们要在返回时滚动到浏览位置，所以不能去后台从新请求数据(不然没法回到以前浏览的位置)，而是采用前端保存修改的数据，并在返回的activated钩子中对当前列表数据修改。

须要注意的事项：

因为vue自身限制，不能检测到数组直接修改长度和利用索引设值 所以，须要使用vm.$set(vm.array,index,newValue)或者vm.array.splice(index,1,newValue)

而后根据页面离开时保存的滚动位置，将页面滚动到浏览位置。在router-view入口处，watch，$route对象，将keep-alive为true的页面，滚动到上次浏览位置。

5.在页面列表中，咱们须要用到分页加载数据，即滑动加载

在keep-alive组件中，页面离开时，并不会销毁当前的vue实例，而是保存在内存中。所以就会形成问题：页面跳转时，触发了滑动事件，加载全部保存在内存中的滑动事件，改变了vue实例的数据。

所以，咱们须要在组件的路由守卫中，在页面离开时beforeRouteLeave中把滑动事件禁用，而后再在页面进入的时候，在activated钩子中恢复滑动事件的。

注意： 使用keep-alive不能销毁实例,vm.$destroy(); 不然再进入页面，即便keep-alive为true也不会保存组件。若是keep-alive的页面较多，可使用,在路由守卫中修改vuex的变量动态改变keep-alive的页面变量。

简单写了个demo，用的移动端ui框架是vux,其中用到的view-box组件，有本身的scroll方法（documment.documentElement.scroll为0）

https://github.com/Cxy56/vue-keepalive-demo