vue <keep-alive>

黑黑穀物餐發表於2018-10-24
VueKeep-Alive

Question問題

有一個這樣的需求，從a路由跳轉到b路由，在返回a路由要保證在a頁面的填寫的表單繼續保留，提高使用者效率

Think思考

vue跳轉路由之前頁面的元件是會銷燬的，所以要想實現這一需求，首先想的是把a頁面資料保留，然後通過各種手段傳到b頁面，路由傳參，瀏覽器儲存等，然後在傳回a頁面。這兒用一種更優雅的方式去解決

answer回答

引出今天的主嘉賓<keep-aive> 先看一下文件,這標籤到底是什麼 <keep-alive> 包裹動態元件時，會快取不活動的元件例項，而不是銷燬它們。和 <transition> 相似，<keep-alive> 是一個抽象元件：它自身不會渲染一個 DOM 元素，也不會出現在父元件鏈中。當元件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命週期鉤子函式將會被對應執行。這兩個鉤子函式就是<keep-alive> 元件啟用和停用時呼叫

Props：

include - 字串或正規表示式。只有名稱匹配的元件會被快取。
複製程式碼
exclude - 字串或正規表示式。任何名稱匹配的元件都不會被快取。
複製程式碼
max - 數字。最多可以快取多少元件例項。
複製程式碼

瞭解了這個元件，就來用吧

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
複製程式碼
{path: 'documentManage', name: 'documentManage', component: documentManage, meta: {
    keepAlive: true
}},
複製程式碼

因為不同路由要進行不一樣的操作，於是利用vue route的meta屬性，可以存值，true為要快取頁面，false為不快取頁面,這樣只實現了a頁面快取，並沒有區分是從b頁面返回，還是從其他頁面來的，所以利用route裡的鉤子函式beforeRouteLeave，在離開此頁面時判斷目的，目的頁為b頁面賦值true，否則false，這樣實現了a->b->a儲存頁面，a->c->a不儲存頁面，但是又出現另一個問題a->b->c->a依舊儲存頁面，應該重新整理頁面，所以還有在利用下beforeRouteEnter。在進入此頁面時判斷來源，程式碼如下，很優雅的實現頁面表單資料留存

beforeRouteEnter (to, from, next) {
    if(from.name == 'pictureList' || from.name == 'invoiceList' || from.name == null){
    	next()
    } else {
    	to.meta.keepAlive = false
    	next()
    }
},
beforeRouteLeave (to, from, next) {
	if(to.name == 'pictureList' || to.name == 'invoiceList'){
		from.meta.keepAlive = true
		next()
	} else {
		from.meta.keepAlive = false
		next()
	}
}
複製程式碼

總結

1.利用<keep-alive>快取元件例項不銷燬機制

2.利用route裡的鉤子函式beforeRouteLeave,beforeRouteEnter,在進入此頁面,離開此頁面時判斷來源和目的

相關文章