记：vue的keeplive缓存列表页面的浏览位置

如下图，我们在使用vue2.0时经常会遇到这样的场景：从一个列表页面进入详情页，然后返回列表页的时候我们想还停留在上次浏览的位置。

实现这样的方法很简单：

• 首先我们在路由文件中当前页面的路由加上一条meta

// 分类页面路由
{      
    path: '/category',      
    name: 'Category',      
    component: Category,      
    meta: {          
        keepAlive: true      
    }
}复制代码

• 然后在app.vue中修改一下router-view:

<keep-alive >        
    <router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>复制代码

表示，路由的meta.keepAlive为true的时候，进行页面的缓存，否则不缓存。

然而，我们实际的需求可能比这更为复杂。例如，从列表页到详情页然后返回列表页，需要缓存上次已经加载的数据和用户浏览的位置，但是如果从其他页面（例如首页）进入列表页，我们不需要他缓存，而是要初始化的状态。这时候我们可以在列表页面的beforeRouteLeave周期内加上一个判断，判断如果是从列表页前往详情页，则缓存页面，否则不缓存：

beforeRouteLeave (to, from, next) {
    from.meta.keepAlive = to.name == 'Detail';            
    next();            
}复制代码

测试了下，缓存正常。

在此基础上，我们可能会遇到再复杂一些的场景。例如订单列表到订单详情的这种场景。正常情况下从详情返回的时候是需要列表页缓存数据的，但是如果详情页有删除订单的操作，那么删除完订单返回列表页时，我们是希望列表页刷新的。那么怎么处理这个问题呢？

我们可以在订单详情页的beforeRouteLeave周期内增加判断：

beforeRouteLeave (to, from, next) {
    // 如果是前往订单页，且已经进行了删除订单的操作
    // 那么将不缓存订单页，而是刷新
    if (to.name == 'Order' && this.isDelete) {
        to.meta.keepAlive = false;
    }         
    next();            
}复制代码

this.isDelete在data中默认是false，只有当完成删除订单之后，才会将其赋值为true，例如，下面是一个删除订单的函数：

deleteOrder(){
    //进行删除订单操作
    this.axios.get('接口地址')
        .then(res=> {
            // 假设这里是接口返回成功的时候
            // 表示已经删除订单
            this.isDelete = true;
            // 返回订单页面
            this.$router.go(-1);
        })
    .catch(err=> {
        // 处理错误
    })
}复制代码

至此，如果详情页没有删除订单的情况下返回订单页，则缓存数据，如果在详情页进行了删除订单的操作后返回订单页面，则重新刷新订单页面数据。

码字不易，欢迎给下小心心吧~~