keep-alive的正确用法
实现:
我有3个页面,
一个index页面,包含点击进入分类sort页面和进入详情detail页面两个功能
一个sort页面,包含上划加载,进入详情detail页面两个功能
一个detail页面,展示页面详情
我要实现的:
从index点击进入detail页面,回退仍旧处于之前进入的位置;
点击进入sort页面,回退仍旧处于之前进入的位置;
点击进入sort页面,并点击进入detail页面,返回sort时,sort页面仍旧处于之前进入的位置,继续返回index页面时,index页面仍旧处于之前进入的位置;
点击不同分类进入sort页面时,sort页面能更新数据。(重点,网上找的很多这一步进入的还是之前的页面,无法更新数据)
思路:
也就是说,index和sort页面将会需要使用keep-alive进行缓存,而detail页面由于大多数情况是每次进入是一个全新的详情,所以不用缓存。
keep-alive的用法:
基本可参考该文章:https://blog.csdn.net/yan263364/article/details/84402595
重点:
通过利用beforeRouteLeave这个钩子函数,
首先index和sort页是默认缓存的
然后index有2种跳转路径,如果跳往sort,我们希望sort能更新数据,毕竟用户选择不同分类跳转的概率更大,所以需要取消sort的默认缓存,改为不缓存,而跳往detail,肯定是不缓存的,无需处理。(to代表着将要跳往的地址,from代表本身目前地址,不懂的可以去看vue-router官网或者百度)
所以:index:
而sort也有2种跳转,跳入详情,我们本身是希望sort被缓存的,比便从detail回到sort不必重复请求,sort默认是缓存的,但是由于index跳入逻辑中有设置sort不缓存的情况,所以我们需要重设,在从sort跳入detail时设置sort为需要缓存,即激活keep-alive。第二种跳转,跳回index,此时我们并不需要sort是缓存的,毕竟我们希望当index跳入sort时是能够刷新数据的,而不是使用缓存,造成即使换了分类跳入仍旧是旧分类的bug。
sort:
重点讲完了,后面有空再详细补充。希望大家能够灵活运用。