vue的keep-alive的正确用法

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:

重点讲完了，后面有空再详细补充。希望大家能够灵活运用。