关于keep-alive用在某个组件上的使用方法

最新推荐文章于 2024-10-14 10:00:48 发布

Debonair_

最新推荐文章于 2024-10-14 10:00:48 发布

阅读量1.1k

点赞数

文章标签： vue-router vue keep-alive

原文链接：https://blog.csdn.net/qq_30114149/article/details/78415030

版权

关于keep-alive用在某个组件上的使用方法

！！！注意注意，这是在某个单一组件上使用keep-alive，不是在某个路由中，其实仅仅是把那个组件用keep-alive包起来就好了，下图是代码：

	<keep-alive>
      <homeContainer></homeContainer>//这里是我自定义的一个组件，里面是我用jQuery写的侧边栏的hover效果
    </keep-alive>

由于jQuery在vue中只能加载一次，当我第一次打开页面时，如图，不会出现任何问题，我主要用jQuery写的是轮播图的侧边栏部分：
在这里插入图片描述
当我点击其他商品，然后返回主页，或者是从其他路由返回到主页面的路由的时候，就会出现下图的样子：

这种状态会一直保持，因为我使用jQuery中的show和hide写的，就像下面这个样子：

			$('.submeal-one').hide();
            $('.hoverSubmeal-one').hover(function () {
                $('.submeal-one').show();
            }, function () {
                $('.submeal-one').hide();
            });