【keep-alive失效问题】使用Vue的keep-alive缓存前一个页面查询条件失效问题

有目标就不怕路远。年轻人.无论你现在身在何方.重要的是你将要向何处去。只有明确的目标才能助你成功。没有目标的航船.任何方向的风对他来说都是逆风。因此,再遥远的旅程,只要有目标.就不怕路远。没有目标,哪来的劲头?一车尔尼雷夫斯基

导读:本篇文章讲解 【keep-alive失效问题】使用Vue的keep-alive缓存前一个页面查询条件失效问题,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

今天遇见一个问题,就是需要在多个tab页面之间切换的时候,需要保留之前tab页面的查询条件。例如:在前一个A页面输入了一些查询条件后,切换到另一个B页面时候,再次切换到A页面,发现A页面的查询条件会被重置,不会被缓存。

(1)问题描述

问题是这样的,我写了一个【A.vue】页面,在【activited()】钩子函数里面调用查询后端数据的方法,然后在后台系统里面切换路由页签的时候,返回到【A.vue】页面,发现每次切换回【A.vue】页面,这个页面之前的查询条件都会被重置,并且重新查询数据。

这里说的tab页签,是指下面这种页面切换的tab页签哦。

【keep-alive失效问题】使用Vue的keep-alive缓存前一个页面查询条件失效问题

起初,我以为是我没有在【router/index.js】文件里面设置【meta对象的keep-alive=true属性】导致的。于是我就到路由【router/index.js】文件里面,找到【A.vue】页面的对应的路由【meta】属性,哎,发现我设置了【keep-alive=true】,那就奇怪了????

为什么【keep-alive】没生效呢???为什么没给我缓存【A.vue】页面呢???


(2)解决方案

最终,我的问题是通过修改【activited()】钩子函数为【created()】实现了页面之间切换,保留前一个页面的查询条件。

最开始,我的查询方法【handleQuery()】是在【activited()】钩子函数里面调用的,但是由于【activited()】函数是页面出现时候,就会执行一次,所以尽管我使用【keep-alive】缓存页面,还是没用的,因为每次切换回A页面时候,都会调用一次【activited()】函数,也就相等于每次都会重置查询条件,重新查询一次数据,所以导致无法保留之前输入的查询参数条件。

keep-alive标签的作用:https://cn.vuejs.org/v2/api/#keep-alive

注意之处:在使用keep-alive的时候,和vue的生命周期函数也有关系,这一点需要额外注意,不然就会出现keep-alive失效的问题。

有没有和我遇见相同问题的小伙伴呢^v^。。。。。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/134752.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!