keep-alive 簡介

成都一家集口碑和實力的網(wǎng)站建設(shè)服務(wù)商，擁有專業(yè)的企業(yè)建站團(tuán)隊和靠譜的建站技術(shù)，十載企業(yè)及個人網(wǎng)站建設(shè)經(jīng)驗 ,為成都近1000家客戶提供網(wǎng)頁設(shè)計制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營銷型網(wǎng)站建設(shè)，品牌網(wǎng)站制作，同時也為不同行業(yè)的客戶提供成都網(wǎng)站制作、網(wǎng)站設(shè)計、外貿(mào)網(wǎng)站建設(shè)的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè)，傳統(tǒng)機械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選創(chuàng)新互聯(lián)。

keep-alive 是 Vue 內(nèi)置的一個組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。

用法也很簡單：

props

include - 字符串或正則表達(dá)，只有匹配的組件會被緩存
exclude - 字符串或正則表達(dá)式，任何匹配的組件都不會被緩存

// 組件 a
export default {
 name: 'a',
 data () {
 return {}
 }
}

 
 
 
可以保留它的狀態(tài)或避免重新渲染

 
 
 
可以保留它的狀態(tài)或避免重新渲染


 
 



 
 




 




 



 
 

遇見 vue-router

router-view 也是一個組件，如果直接被包在 keep-alive 里面，所有路徑匹配到的視圖組件都會被緩存：

然而產(chǎn)品汪總是要改需求，攔都攔不住...

問題

如果只想 router-view 里面某個組件被緩存，怎么辦？

使用 include/exclude
增加 router.meta 屬性
使用 include/exclude

// 組件 a
export default {
 name: 'a',
 data () {
 return {}
 }
}

 
 
 

exclude 例子類似。

缺點：需要知道組件的 name，項目復(fù)雜的時候不是很好的選擇

增加 router.meta 屬性

// routes 配置
export default [
 {
 path: '/',
 name: 'home',
 component: Home,
 meta: {
 keepAlive: true // 需要被緩存
 }
 }, {
 path: '/:id',
 name: 'edit',
 component: Edit,
 meta: {
 keepAlive: false // 不需要被緩存
 }
 }
]

 
 
 



 

優(yōu)點：不需要例舉出需要被緩存組件名稱

【加鹽】使用 router.meta 拓展

假設(shè)這里有 3 個路由： A、B、C。

需求：

默認(rèn)顯示 A
B 跳到 A，A 不刷新
C 跳到 A，A 刷新
實現(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();
 }
};

這樣便能實現(xiàn) B 回到 A，A 不刷新；而 C 回到 A 則刷新。

總結(jié)

路由大法不錯，不需要關(guān)心哪個頁面跳轉(zhuǎn)過來的，只要 router.go(-1) 就能回去，不需要額外參數(shù)。

然而在非單頁應(yīng)用的時候，keep-alive 并不能有效的緩存了= =