頁面跳轉緩存 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()
  },

按照以上步驟就可以實現該功能了，安排！