您好,登錄后才能下訂單哦!
keep-alive 簡介
keep-alive 是 Vue 內(nèi)置的一個組件,可以使被包含的組件保留狀態(tài),或避免重新渲染。
用法也很簡單:
<keep-alive> <component> <!-- 該組件將被緩存! --> </component> </keep-alive>
props
include - 字符串或正則表達(dá),只有匹配的組件會被緩存
exclude - 字符串或正則表達(dá)式,任何匹配的組件都不會被緩存
// 組件 a export default { name: 'a', data () { return {} } } <keep-alive include="a"> <component> <!-- name 為 a 的組件將被緩存! --> </component> </keep-alive>可以保留它的狀態(tài)或避免重新渲染 <keep-alive exclude="a"> <component> <!-- 除了 name 為 a 的組件都將被緩存! --> </component> </keep-alive>可以保留它的狀態(tài)或避免重新渲染 <keep-alive include="test-keep-alive"> <!-- 將緩存name為test-keep-alive的組件 --> <component></component> </keep-alive> <keep-alive include="a,b"> <!-- 將緩存name為a或者b的組件,結(jié)合動態(tài)組件使用 --> <component :is="view"></component> </keep-alive> <!-- 使用正則表達(dá)式,需使用v-bind --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- 動態(tài)判斷 --> <keep-alive :include="includedComponents"> <router-view></router-view> </keep-alive> <keep-alive exclude="test-keep-alive"> <!-- 將不緩存name為test-keep-alive的組件 --> <component></component> </keep-alive>
遇見 vue-router
router-view 也是一個組件,如果直接被包在 keep-alive 里面,所有路徑匹配到的視圖組件都會被緩存:
<keep-alive> <router-view> <!-- 所有路徑匹配到的視圖組件都會被緩存! --> </router-view> </keep-alive>
然而產(chǎn)品汪總是要改需求,攔都攔不住...
問題
如果只想 router-view 里面某個組件被緩存,怎么辦?
使用 include/exclude
增加 router.meta 屬性
使用 include/exclude
// 組件 a export default { name: 'a', data () { return {} } } <keep-alive include="a"> <router-view> <!-- 只有路徑匹配到的視圖 a 組件會被緩存! --> </router-view> </keep-alive>
exclude 例子類似。
缺點(diǎn):需要知道組件的 name,項(xiàng)目復(fù)雜的時候不是很好的選擇
增加 router.meta 屬性
// routes 配置 export default [ { path: '/', name: 'home', component: Home, meta: { keepAlive: true // 需要被緩存 } }, { path: '/:id', name: 'edit', component: Edit, meta: { keepAlive: false // 不需要被緩存 } } ] <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 這里是會被緩存的視圖組件,比如 Home! --> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"> <!-- 這里是不被緩存的視圖組件,比如 Edit! --> </router-view>
優(yōu)點(diǎn):不需要例舉出需要被緩存組件名稱
【加鹽】使用 router.meta 拓展
假設(shè)這里有 3 個路由: A、B、C。
需求:
默認(rèn)顯示 A
B 跳到 A,A 不刷新
C 跳到 A,A 刷新
實(shí)現(xiàn)方式
在 A 路由里面設(shè)置 meta 屬性:
{ path: '/', name: 'A', component: A, meta: { keepAlive: true // 需要被緩存 } }
在 B 組件里面設(shè)置 beforeRouteLeave:
export default { data() { return {}; }, methods: {}, beforeRouteLeave(to, from, next) { // 設(shè)置下一個路由的 meta to.meta.keepAlive = true; // 讓 A 緩存,即不刷新 next(); } };
在 C 組件里面設(shè)置 beforeRouteLeave:
export default { data() { return {}; }, methods: {}, beforeRouteLeave(to, from, next) { // 設(shè)置下一個路由的 meta to.meta.keepAlive = false; // 讓 A 不緩存,即刷新 next(); } };
這樣便能實(shí)現(xiàn) B 回到 A,A 不刷新;而 C 回到 A 則刷新。
總結(jié)
路由大法不錯,不需要關(guān)心哪個頁面跳轉(zhuǎn)過來的,只要 router.go(-1) 就能回去,不需要額外參數(shù)。
然而在非單頁應(yīng)用的時候,keep-alive 并不能有效的緩存了= =
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。