主要介绍了vuex + keep-alive实现tab标签页面缓存功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

在开发很多管理系统过程之中，常遇到这种需求，需要对打开路由页面进行缓存，然后在系统页眉提供方便查阅的tab标签进行切换以及对已经缓存页面进行数据刷新和清除数据操作。具体演示如下图所示：   在上面演示中实现了类似 window tab 标签页效果，会对当前数据进行缓存。在浏览器中实现对路由页面的缓存可以减少接口请求，也方便了用户来回切换想搜索的数据列表。 原理 Vue 提供的 keep-alive API实现对路由组件的缓存。 include 属性可以绑定一个数组，里面是需要路由组件的 na

需求： 项目中需要开发一个导航栏，类似浏览器的导航，没有关闭的时候页面缓存，关掉之后，页面随之销毁。（如图） 项目是使用Vue + Vue-Router + Vuex 刚开始使用的方法是：关闭导航标签，直接调用对应的页面的$destory()方法，OK，可以实现关闭页面（下次再打开该页面，将初始化）的功能，但是遇到个问题： 该页面将不再被缓存，也就是说切换导航tab时，页面将不断的被初始化！！！ 查了一下文档，找了度娘，没发现解决方法，又去请教G哥，这才发现原来Vue keep-alive真的