今天遇见一个问题，就是需要在多个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
