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 } },
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/58573.html
標籤：JavaScript