关于vue keep-alive配合swiper的问题

问题描述，首页优化使用keep-alive以后，从别的页面跳回来，swiper轮播不播放，查了很久资料，有的说要从新调用swiper的init方法进行初始化，等等，最终都没能解决问题，最终经过查看文档得知keep-alive缓存组件的是created钩子会建立一个cache对象，用来做为缓存容器，保存vnode节点。destroyed钩子则在组件被销毁的时候清除cache缓存中的全部组件实例。

由此猜测，从其余页面跳回来时，显示的页面可能只是vnode节点，还有渲染出html标签就执行了new了swiper实例，致使swiper的实例没法挂在到实际的html元素上，因此出现轮播没法播放的问题。

解决方法：

　　keep-aive组件支持两个钩子，activated钩子在keep-alive组件中代替了created钩子每次初始化时调用activated，deactivated为销毁时的钩子，因此能够申明一个状态，让keep-alive组件渲染成html元素后再实例化swiper,就能够解决这个bug。

开始上截图！！

html代码：

　　

js代码：

　　

　　

 

此方法只是解决了我的需求，记录下来主要是为了提高记忆，若是能够帮助到别人最好，若是帮助不到，请勿喷！！！