vue2.0提供了一个keep-alive用来缓存组件，避免多次加载相应的组件，减少性能消耗。
在使用时出现了个问题。
同时使用keep-alive和vue-awesome-swiper，出现了一个bug：A页面使用swiper（swiper有用到loop属性），从A页面跳转到B页面后，使用history.back(1)返回A页面时，A页面中swiper的loop失效。原因是keepAlive缓存了页面，路由跳转后不在触发组件的生命周期。我们使用activated生命周期能解决该问题。
下面是keepAlive的使用方法和该问题的解决方法详解。
一、keepAlive使用方法
1.基本使用
方法一：缓存个别组件。在组件中使用keepAlive标签包裹router-view标签。
代码如下。
图1 组件中设置keepAlive
方法二：整体缓存。设置路由时，在meta属性下设置keepAlive:true。
代码如下。
图 2 路由中设置keepAlive
2.keep-alive的生命周期
activated：进入页面执行的函数。页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
deactivated：离开页面执行的函数。页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated
//注意：activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在
3.keep-alive内置组件的两个属性：include和exclude
include和exclude表示哪些组件需要缓存，哪些组件不需要缓存。
用法：
图3 keepAlive两个属性的用法
二、问题解决
在A页面（A页面用到swiper）使用activated生命周期刷新数据。
具体解决方法：给swiper组件绑定v-if属性，在进入页面时触发activated生命周期调取数据，调取数据成功后设置v-if值为true。
附上代码：
图4 html的代码
图5 js的代码
