keep-Alive搭配vue-router實現緩存頁面效果

　　Vue工程中有些頁面需要有緩存。這個功能通過keep-alive組件實現，keep-alive組件可以使被包含的組件保留狀態，或避免重新渲染。

　　在routes.js中定義路由，在路由中定義元信息(meta字段)，需要緩存的頁面就需要在meta對象中定義一個字段，這里設置為keepAlive，設置為true，反之，則不緩存。

{
    path: '/a',
    component: () => import('@/pages/A'),
    meta: {
      title:'A',
      keepAlive: true
    }
},
{
    path: '/b',
    component: () => import('@/pages/B'),
    meta: {
      title:'B',
      keepAlive: true
    }
},
{
    path: '/c',
    component: () => import('@/pages/C'),
    meta: {
      title:'C',
      keepAlive: true
    }
}

　　然后修改App.vue頁面

<template>
  <div id="app">
    <!-- <router-view v-if="isRouterAlive"></router-view> -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

　　這樣就可以實現有目的的對頁面進行緩存了。

　　但如果這時要實現從A頁面進入B頁面后，讓A頁面不緩存的話我們還需要搭配上路由鈎子函數beforeRouteLeave()。

在A頁面中這樣寫：

beforeRouteLeave(to, from, next) {
        // 設置下一個路由的 meta
        if(to.meta.title=="B"){
            from.meta.keepAlive = false;  // 讓B不緩存，即刷新
        }
        next();
}

　　用到keep-Alive，遇到的最多的一個問題就是怎么去掉這種緩存狀態。就比如用戶每一次進行新流程的操作的時候，這個時候頁面還是緩存是不對的。

　　就比如，一個用戶登錄之后在某個緩存的頁面上填了信息，如果這個用戶注銷了之后，按道理，這些信息是應該消失的，即恢復初始狀態，但是這個時候不關閉頁面標簽（因為新開標簽的話會使所有頁面重新渲染），用戶再次登錄回去，還會發現之前的頁面還是存在緩存的，即這個頁面沒有重新渲染。如果想要解決這個問題的話，就要提到activated和deactivated這兩個特殊的生存周期函數了。但是需要注意的是，activated和deactivated這兩個生存周期函數只存在於keep-Alive組件中。當一個keep-Alive組件緩存生效的時候，它不會觸發平常我們熟悉的created()和mounted()這類生存周期函數，因此不會被重新渲染，所以，它的狀態得以保留。但是我們可以通過這兩個生存周期函數來更新頁面。

　　先設置一個全局的標志符，類型為布爾值，代表是否為緩存狀態，你可以把它存進vuex或者sessionStorage。（以下為存入sessionStorage為例）

　　在用戶登錄成功的時候設置為sessionStorage.setItem("keepAlive",false);然后在緩存頁面中添加如下代碼：

activated:function(){
        if(sessionStorage.getItem("keepAlive")=='false'){
            //進行初始化
        }else{
            //to do
        }
},