easyui一个页面两个搜索框对应两张表_Vue keepAlive 页面缓存

大家在做后台管理系统时候有没有遇到过这种场景：一个列表页面，含分页，有多个搜索条件，可以编辑。

编辑页，详情页，注册页都是新页面通过路由跳转，不是组件或弹框方式。

标红区域为查询条件

控制表头显示，这个也需要缓存

如果我们按照 A 类型进行搜索，查出来100条数据（默认20条/页），我们翻阅到第 3 页，找到 B 数据，我们对 B 进行编辑，编辑过后回到列表页面，按照用户体验我们还是想回到按 A 搜索的第 3 页的。

遇到了这个问题，我尝试过存储vuex、session、组件引入传参等方式，发现都不太合适。

vuex：首先说明，不要为了使用 vuex 而使用，而是与其他方式相比，只有 vuex 是最方便的时候在使用。拿我的项目举例，我的这个页面需要 7 个搜索条件还有分页的页码及每页的条数，还有一个控制表头显示的列表共10个参数。如果使用 vuex 需要引入并且添加store中的方法代码【各js相互引入，抛出，定义等】还需要在组件中有修改值得地方commit。10个参数，使用 vuex 相对来说代码量比较大且操作繁琐。

session：代码量和 vuex 不相上下，而且存储session其实和暴露明文是一样的，一些信息会暴露出去，我很不推荐。

组件引入：10个参数传来传去很是麻烦而且容易混乱。

想了又想想了又想，记起来还有个 KeepAlive 这么个东西：Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染 DOM。

于是我在 router-view 外面包裹了 keepalive，我兴高采烈的进行自测，来回切换页面，切回来上次的操作的确被记录了。我很开心，像是发现了新大陆一样，哈哈

但是有个问题，因为编辑页、注册页等是通过路由跳转，当我们编辑了某条数据，返回列表页时，因为被缓存列表页展示的数据并没有被更新过来，只有刷新下才能更新过来。这怎么办？！难道这个方法也不行？我实在没办法了，于是百度看看度娘对这个问题有没有什么见解。

大家也都晓得，你搜的东西往往废话连篇还说不到点上。还是算了，去官网看了下keepalive，突然想起来，使用 keepalive 会有两个生命周期

于是在 activated 声明周期内重新调用获取需要更新的方法。问题解决了~

KeepAlive使用方法：

1). 在 route 的 index.js 中标识需要缓存的页面

2). 在 用 keepAlive 包裹 router-view

大家遇到这种问题时怎么解决的呢？有好的方法分享出来，一起进步哦，欢迎评论~