问题： 我目前正在负责一个后台管理项目，管理系统最多的无外乎就是这张表，那张表。而这个问题就是出现在表上，基本上表上的每个数据都要有一个详情，而且由于表的中的数据量一般都很大，都会用到分页或者查询搜索。
需求： 也就是咱们要解决的问题，这个问题就出现在表页面与详情页面或者编辑页面跳转时，不能很好的缓存列表页在跳转至其他页面再进行返回时的场景。简而言之就是缓存列表组件并只在对应模块下进行缓存。
好的扯了这么多，那么我是如何解决的呢?
因为在Vue中，每个页面都可以被认为是一个组件，这个时候，可以考虑将该页面进行缓存，然后我在Vue官网找到了keep-alive,其具体内容如下：
以上可以知道，通过keep-alive是可以缓存不活动的组件实例的，并且在keep-alive中是会有activated和deactivated两个生命周期钩子函数。
最初时，我是在 router中添加meta元信息,在其中添加一个keepAlive属性，并将要缓存的页面设置为true
// 需要被缓存的页面路由
{
path: '/keepAlive',
name: 'keepAlive',
component: keepAlive,
meta:{
keepAlive: true
}
}
然后在视图组件router-view上添加keepAlive
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
最后通过activated和deactivated函数在被缓存的页面调用相关的方法。
上述方法能将符合条件的路由进行缓存，但是上述方法有一个弊端，回到一开始的需求，是要在对应模块下缓存列表组件，而上述方法是将所有符合条件的路由进行了缓存，但是并没有做到仅仅只是在对应模块下缓存。
网上说直接将keepAlive设置为false就能销毁缓存，从我实验的结果来看，貌似并没有什么卵用，改天用Vue-devtools看看到底有没有被销毁。
在观看官方文档时，keep-alive自带三个props,分别是include、exclude、max，具体使用方法我就不多做赘述了直接上文档吧。
好了，下面直接说我的解决办法吧。我将include和vuex搭配进行了使用，使用include 判断需要缓存的路由，通过vuex 全局缓存数据，因为这个需求是对整个系统的列表而言，因此我还是用了 [mixin](混入 — Vue.js)(混入)
// store
state: {
// 用来存放需要需要缓存的组件
keepAliveArray: []
}，
mutatios: {
// 清空缓存组件
clearKeepAliveArr(state, data){
state.keepAliveArray = data
},
// 添加需要缓存的数据
pushKeepAliveArr(state, data){
state.keepAliveArr.push(data)
},
}
// main.js
// 全局混入一个导航守卫，在离开当前页面时使用
Vue.mixin({
beforeRouteLeave(to, from, next){
// 如果是跳转的是列表列表要清空之前的数据
if(to.meta.isList ){
this.$store.commit('clearKeepAliveArr',[]);
this.$store.commit('pushKeepAliveArr',to.name);
}
}
})
// router
// 需要注意的是：因为include是靠组件名进行判断是否缓存
// 因此必修将 name 和 组件名保持一致。
{
path: 'list1',
name: 'list1',
component: list1,
meta: {
pageName: '列表1'，
isList: true
}
},
{
path: 'details1',
name: 'details1',
component: details1,
meta: {
pageName: '详情1'，
}
},
{
path: 'list2',
name: 'list2',
component: list2,
meta: {
pageName: '列表2'，
isList: true
}
},
// router-view 所在的页面
<template>
<keep-alive :include="keepAliveArr">
<router-view></router-view>
</keep-alive>
</template>
<script>
export default {
computed: {
keepAliveArr(){
return this.$store.state.keepAliveArr
}
},
};
</script>
通过以上所述方法就能够成功的将同一模块下面的列表进行缓存了，因为是使用的是路由守卫进行的数据的添加和删除，因此，如果想要在页面刷新后任要能够进行缓存，可以再vuex上添加sessionstorage缓存数据，这里我就不做说明了，相信这难不到聪明的你，并且如果路由存在子级话，想要缓存路由还是需要在router-view上加上keep-alive。
如果上述有什么不对的地方，或者各位大佬们有什么更好的方法，可以在下方留言评论告知哦！
纯手打，请各位大佬给我点个赞!
