vue-awesome-swiper之使用keepAlive缓存后跳转页面后swiper的loop失效

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的代码