vue内置组件<keep-alive>配合vueRouter实现组件缓存

问题：项目中从查询出的列表点击进入列表详情页，从详情页再返回列表页，列表页的原搜索数据和已查询出的信息全刷新了，想再次点击列表的话还需要再次进行查询，影响用户体验。 列表页：

页面跳转之后再次进入列表页，列表页已刷新，所有数据清空

解决办法：对组件进行缓存，缓存后的页面保持原数据页面不会刷新。

具体方法：

       使用vue的内置组件，包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们，可以保留组件状态避免重新渲染。

<keep-alive>
    <router-view />
</keep-alive>

以上代码可以缓存所有页面，而此时只想缓存列表页，需要对,进行条件判断。

Vue2.10新增include和exclude prop允许组件有条件地缓存。

<keep-alive include="Personnel">
  <router-view />
</keep-alive>

注意： 此时有坑，include包含的组件名，并不是router中的组件name而是组件自身的name值。

新问题：如果从非详情页的其他页面再跳转回列表页，列表页此时应该刷新。

解决办法：

Router.config.js：

{
    name: 'Personnel',
    path: '/personnel/',
    component: 'Personnel',
    meta: {
      keepAlive: true
    }
},

Keep-alive改写

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

列表页利用vue-router的钩子函数修改keepAlive的值

beforeRouteLeave(to, from, next) {
    from.meta.keepAlive = false
    next();
},

详情页修正keepAlive的值

beforeRouteLeave(to, from, next) {
    to.meta.keepAlive = true
    next();
},

至此代码可保证只有从详情页返回列表页，列表页缓存，其余页面跳转列表页，列表页刷新页面。