Vue中keep-alive缓存使用，列表到详情应用

1.首先得清楚，在启用keep-alive时，会增加哪些生命周期函数。

activated（当页面缓存，进入时）  , deactivated（当页面缓存，离开时）

2.在项目当中我们主要用到的还是activated，deactivated多数时候用不上。
3.模拟场景，有3个页面，home主页，list列表页，detail详情页

用户有以下操作：
1.从 home->list->detail
2.从 home->detail->list

4.这种场景中对应的页面操作，如下：

//App.vue，配置缓存

//router.js，为路由加上缓存标志
{
    path: 'list',   //开票管理
    component: List,
    meta:{
      keepAlive:true,//需要缓存的页面
      isFresh:false,//是否刷新页面
      scrollTop: 0,//缓存时，当前页面的高度
    }
}

//List.vue，设置缓存时的操作
//data中有如下数据
 data() {
            return {
                page: 1,
                total: 0,
                listData: []
            }
},
//一般数据在created中请求，但是如果页面缓存了就放在activated中
 activated(){
            let meta = this.$route.meta;
            if(meta.isFresh || !this.listData.length){//允许刷新操作 或者 主页->详情页->列表页 时，
                this.page = 1;//将page更新为初始值
                meta.isFresh = false;
                this.getListData();//请求数据
            }else {//详情页缓存，跳到之前的高度
                this.$nextTick(()=>{
                    window.scrollTo(0,meta.scrollTop)
                })
            }
 },
//我们需要在当页的钩子函数中，加上操作
 beforeRouteEnter(to,from,next){
            if(from.path !== '/detail'){//不是从detail页面过来的，需要刷新
                to.meta.isFresh = true
            }
            next()
        },
 beforeRouteLeave(to,from,next){
            if(to.path==='/detail'){
                from.meta.scrollTop = document.documentElement.scrollTop||document.body.scrollTop
            }else {//不去详情页面时，将缓存的listData数组清空
                this.listData = []
            }
            next()
        },

5.如有疑问，可提