緩存組件<keep-alive>

1.組件作用

組件, 默認(rèn)會緩存內(nèi)部的所有組件實(shí)例，當(dāng)組件需要緩存時(shí)首先考慮使用此組件。

2.使用場景

場景1：tab切換時(shí)，對應(yīng)的組件保持原狀態(tài)，使用keep-alive組件

使用：KeepAlive | Vue.js，參考官網(wǎng)即可。

場景2：路由切換回來時(shí)如果需要保持當(dāng)前路由界面下的狀態(tài)，就需要使用緩存。

使用：

1.定義路由時(shí)添加字段標(biāo)識 isKeepAlive，防止緩存所有路由

 {"path": "/home","name": "home","component": "/home/index","label": "首頁","meta": {"icon": "home","title": "首頁","isKeepAlive": false}}

2.使用 <router-view/>

<!--如果字段標(biāo)識緩存，就緩存，否則不緩存--> 
<!--$route表示路由信息--> 
<router-view v-slot="{ Component }"><keep-alive><component :is="Component" v-if="$route.meta.isKeepAlive" :key="$route.fullPath" /></keep-alive><component :is="Component" v-if="!$route.meta.isKeepAlive" :key="$route.fullPath" />
</router-view>

3.可能的報(bào)錯

報(bào)錯內(nèi)容：parentComponent.ctx.deactivate is not a function

解決: 給component添加key屬性，否則在觸發(fā)deactivate鉤子時(shí)會出問題