keepAlive页面缓存以及新页面不刷新问题(activate

问题

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

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

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

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

组件引入：10个参数传来传去很是麻烦而且容易混乱，不符合业务逻辑UI设计

KeepAlive ：Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染 DOM。

但是有个问题，因为编辑页、注册页等是通过路由跳转，当我们编辑了某条数据，返回列表页时，因为被缓存列表页展示的数据并没有被更新过来，只有刷新下才能更新过来。

重点来了 就几行代码，解决问题。

keepAlive怎么使用自己查询，这里介绍的是使用后如何刷新问题。

// 列表页面
 activated() {
      this.search()
 }

用到的是 keepAlive 的生命周期中的activated方法，该方法在keepAlive激活时调用。所以你页面中需要的刷新都写在这里面就完成了。

你以为这样就结束了吗！！！没有

A页面缓存了，push进入B页面。首次进入B页面数据正常，url也正常。回退到A页面，A页面确实缓存了。再从列表中选择进入B页面。此时B页面的数据是缓存的，但是url是正常的！！！见了鬼了！

处理方案一：

在B页面也加，进行处理

// 详情页面
 activated() {
     需要刷新的数据
 }

处理方案二：

      <keep-alive v-if="keepAlive" exclude="Detail">
        <router-view :key="key"></router-view>
      </keep-alive>

      <keep-alive v-else exclude="Detail">
        <router-view :key="key"></router-view>
      </keep-alive>

router中添加exclude="Detail" ，你不想被缓存的页面都name都写出Detail

include和exclude都是针对组建名称，非路由！！

include - 字符串或正则表达式。只有匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。

应该结束了！！！