缓存组件keep-alive

后台管理项目中，会遇到从列表点进去查看详情，然后再返回列表页面就会自动刷新。比如，从列表第10页的某一条点击进入详情页，然后从详情页返回列表，页面自动刷新数据又从第一页开始。。。哈哈哈，难受不？？？

我用的element的分页组件，以前的做法是把当前页码存在localStorage或者sessionStorage中，返回列表页，就把本地存储中的页码拿出来重新赋值给分页等一系列操作。

推荐使用vue的缓存组件keep-alive，主要用于保留组件状态或避免重新渲染。有activated 和 deactivated 这两个生命周期钩子函数，详见 https://cn.vuejs.org/v2/api/#keep-alive

1.首先，我们在需要缓存的组件中，打上标记，在路由中，为这些列表页设置keepAlive:true, 代表需要缓存，false代表不需要。

{
    path: "/competitorList", //我项目中的列表页
    name: "competitorList",
    component: resolve => require(['@/views/competitorList'],resolve),
    meta: {
      keepAlive:true
    }
}

2.在App.vue中使用

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

大功告成，这样从详情页返回列表，页面就不会自动刷新了，有没有很方便呢，哈哈哈！