今天遇见一个问题,就是需要在多个tab页面之间切换的时候,需要保留之前tab页面的查询条件。例如:在前一个A页面输入了一些查询条件后,切换到另一个B页面时候,再次切换到A页面,发现A页面的查询条件会被重置,不会被缓存。
(1)问题描述
问题是这样的,我写了一个【A.vue】页面,在【activited()】钩子函数里面调用查询后端数据的方法,然后在后台系统里面切换路由页签的时候,返回到【A.vue】页面,发现每次切换回【A.vue】页面,这个页面之前的查询条件都会被重置,并且重新查询数据。
这里说的tab页签,是指下面这种页面切换的tab页签哦。
起初,我以为是我没有在【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