问题描述，首页优化使用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代码：

　　

　　

此方法只是解决了个人需求，记录下来主要是为了提升记忆，如果可以帮助到别人最好，如果帮助不到，请勿喷！！！

最新文章

1. Sql Server系列：Update语句
2. linux系统下yum 安装mysql的方法
3. Keep-Alive 总结
4. JVM内存模型和关键参数设置
5. MVC4 WEBAPI(一)使用概述
6. JVM复习笔记
7. mac机器下远程仓库添加完毕之后，却无法上传应有的内容。
8. HDU 3157 Crazy Circuits（有源汇上下界最小流）
9. Java并发——Fork/Join框架
10. PHP高级特性基础
11. android新建项目
12. flutter 容器
13. java将错误信息写入文件
14. zabbix添加nginx监控
15. jquery中live is not a function的问题
16. selenium+python自动化笔记之一
17. SSH服务知识
18. Unittest + python
19. 两台openwrt 间的免登陆ssh
20. java study文件读写

热门文章

1. rpm环境安装dpkg包管理工具
2. 关于 python 的内存机制
3. eclipse 无法将节点解析到句柄
4. MySQL DATE_SUB查询工龄大于35的员工信息
5. 记一次 .NET 某工控MES程序 崩溃分析
6. 基于.NetCore开发博客项目 StarBlog - (23) 文章列表接口分页、过滤、搜索、排序
7. JUC源码学习笔记7——FutureTask源码解析,人生亦如是，run起来才有结果
8. day06-Vue03
9. python进阶之路9文件的处理方法
10. [cocos2d-x]从源码角度思考convertToWorldSpace()与convertToWorldSpaceAR()坐标系的转换