vue2.0提供了一個(gè)keep-alive用來緩存組件乓旗，避免多次加載相應(yīng)的組件灰署，減少性能消耗赁濒。
在使用時(shí)出現(xiàn)了個(gè)問題两入。
同時(shí)使用keep-alive和vue-awesome-swiper净宵，出現(xiàn)了一個(gè)bug：A頁面使用swiper（swiper有用到loop屬性），從A頁面跳轉(zhuǎn)到B頁面后，使用history.back(1)返回A頁面時(shí)择葡，A頁面中swiper的loop失效紧武。原因是keepAlive緩存了頁面，路由跳轉(zhuǎn)后不在觸發(fā)組件的生命周期敏储。我們使用activated生命周期能解決該問題脏里。
下面是keepAlive的使用方法和該問題的解決方法詳解。
一虹曙、keepAlive使用方法
1.基本使用
方法一：緩存?zhèn)€別組件迫横。在組件中使用keepAlive標(biāo)簽包裹router-view標(biāo)簽。
代碼如下酝碳。
方法二：整體緩存矾踱。設(shè)置路由時(shí)，在meta屬性下設(shè)置keepAlive:true疏哗。
代碼如下呛讲。
2.keep-alive的生命周期
activated：進(jìn)入頁面執(zhí)行的函數(shù)。頁面第一次進(jìn)入的時(shí)候返奉，鉤子觸發(fā)的順序是created->mounted->activated
deactivated：離開頁面執(zhí)行的函數(shù)贝搁。頁面退出的時(shí)候會(huì)觸發(fā)deactivated，當(dāng)再次前進(jìn)或者后退的時(shí)候只觸發(fā)activated
//注意：activated,deactivated這兩個(gè)生命周期函數(shù)一定是要在使用了keep-alive組件后才會(huì)有的芽偏，否則則不存在
3.keep-alive內(nèi)置組件的兩個(gè)屬性：include和exclude
include和exclude表示哪些組件需要緩存雷逆，哪些組件不需要緩存。
用法：
二污尉、問題解決
在A頁面（A頁面用到swiper）使用activated生命周期刷新數(shù)據(jù)膀哲。
具體解決方法：給swiper組件綁定v-if屬性，在進(jìn)入頁面時(shí)觸發(fā)activated生命周期調(diào)取數(shù)據(jù)被碗，調(diào)取數(shù)據(jù)成功后設(shè)置v-if值為true某宪。
附上代碼：
