单页面切换路由时的倒计时和Vue倒计时组件

单页面切换路由时的倒计时和Vue倒计时组件

蚊子前端博客
发布于 2018-10-11 19:36
单页面中使用倒计时的注意事项,同时也分享一下我正在使用的倒计时组件

我的项目是用Vue写的单页面应用,然后首页上的每个商品都有一个倒计时,计算当前商品距离结束的剩余时间,而且还使用了keep-alive缓存首页中的数据,可是切换到别的路由再切换回首页时,倒计时就出现错乱了: 有多个倒计时交叉进行,出现倒计时混乱。

排查后得到的原因是: 在单页面应用中,无论怎么切换hash路由,定时器都是存在的,因此在单页面中切换路由时,应当在组件的deactivateddestroyed中进行销毁;回到这个页面时,再重新启动!

分享一个我项目中正在使用的倒计时: vue-countdown

单页面切换路由时的倒计时-蚊子的前端博客

页面中可以多次调用,且相互之前独立倒计时!

COPYHTML

标签:

阅读(796)

公众号:

qrcode

微信公众号:前端小茶馆

版权声明:
作者:Joker 链接:https://hooper.eu.org/archives/47657
文章版权归作者所有,转载请注明出处。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>