页面跳转缓存 keepAlive

情境：在做列表时候，数据多会有分页，每一条数据会有一个修改或者查看详情的操作，假设现在搜索条件变成第二页或者其他条件，当返回页面时候仍希望看到刚才选择的搜索条件所对应的数据

分析以往：之前遇到这种情况，都是用sessionStorage或者将搜索条件存到services里面，然后返回到列表页时候再去取这些值，但是会有一个弊端，就是按F5刷新时候当前页面的数据还是之前缓存下来的，一般是希望回到初始化那样。

新的方法：在用vue开发的时候，他有一个很好用的内置组件keepAlive，可以解决页面缓存问题 ，具体实现方法如下

一：首先在router.js中，设置meta属性 keepAlive为true这样表示这个页面需要被缓存

  　　　　{
          path: "organization",
          name: "机构管理",
          component: orgManage,
          meta: {
            keepAlive: true //需要被缓存
          }
        },

二：之前在app.vue中写下面的代码，但是会有一个问题，菜单栏是后台接口返回的，如果在app.vue中修改的话，keepAlive的页面跳没有keepALive的页面会引发mouted，导致菜单不见所以

<template>
  <div> //注意要用div包裹，否则会出错
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是被缓存的视图组件 -->
      </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive">
      <!-- 这里是 不 被缓存的视图组件 -->
    </router-view>
  </div>
</template>

注意:这段代码放在full.vue中，代码如下

<template>
  <div class="app">
    <AppHeader />
    <div class="app-body">
      <Sidebar :menu-list="menuList" :menu-enable-map="menuEnableMap" />
      <main class="main">
        <breadcrumb :list="list" />
        <div class="container-fluid">
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive">
            </router-view>
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </div>
      </main>
    </div>
  </div>
</template>

三：设置下一个路由的meta，注意这个代码不是放在机构管理列表里面，而是放在类似修改或者查看机构的页面里，在那里设置keepAlive为true然后返回到机构列表才不会刷新

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

按照以上步骤就可以实现该功能了，安排！