vue中的緩存——keep-alive,activated，deactivated

一、經過keep-alive和router-view實現路由緩存，具體代碼以下：
在app.vue：

<router-view v-if="!$route.meta.keepAlive"/>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
在路由文件中配置相關參數，來判斷該路由是否須要緩存，當keepAlive存在而且值爲true時，緩存該路由

{
path: 'dCustomerPage',
name: '客戶管理',
component: dCustomerPage,
meta:{
keepAlive: true,
}
},
二、關於activated鉤子函數
首次進入該路由的頁面時會觸發created，mounted，activated等鉤子函數，但使用this.router.go1返回該路由的時候，不會觸發created和mounted，只會觸發activated。若是調用this.router.go(−1)返回該路由的時候，不會觸發created和mounted，只會觸發activated。若是調用this.router.go(-1)返回該路由後但願手動刷新數據，能夠在activated(){}中執行相關的請求，但首次進入或者f5刷新界面的時候會屢次觸發相關數據請求，能夠用定時器解決或者相似鎖的操做。

三、關於deactivated鉤子函數
在離開該緩存路由後，該路由的組件並無被銷燬，若是須要銷燬如定時器相關的操做能夠在deactivated鉤子函數中處理，相似於beforeDestroy鉤子函數的調用