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

　　在routes.js中定義路由，在路由中定義元信息(meta字段)，需要緩存的頁面就需要在meta對象中定義一個(gè)字段，這里設(shè)置為keepAlive，設(shè)置為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>

　　這樣就可以實(shí)現(xiàn)有目的的對頁面進(jìn)行緩存了。

　　但如果這時(shí)要實(shí)現(xiàn)從A頁面進(jìn)入B頁面后，讓A頁面不緩存的話我們還需要搭配上路由鉤子函數(shù)beforeRouteLeave()。

在A頁面中這樣寫：

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

　　用到keep-Alive，遇到的最多的一個(gè)問題就是怎么去掉這種緩存狀態(tài)。就比如用戶每一次進(jìn)行新流程的操作的時(shí)候，這個(gè)時(shí)候頁面還是緩存是不對的。

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

　　先設(shè)置一個(gè)全局的標(biāo)志符，類型為布爾值，代表是否為緩存狀態(tài)，你可以把它存進(jìn)vuex或者sessionStorage。（以下為存入sessionStorage為例）

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

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

總結(jié)

到此這篇關(guān)于keep-Alive搭配vue-router實(shí)現(xiàn)緩存頁面效果的示例代碼的文章就介紹到這了,更多相關(guān)vue router實(shí)現(xiàn)緩存頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論