需求提了这样一个要求,当我们从列表页跳转到(详情页面,修改页面,新增页面)时,点击(详情页面,修改页面,新增页面)上面的返回按钮,可以回到列表页面,并且需要缓存最初的列表页面条件与页数。
对于这种情况,第一想到的解决办法是在路由列表里面加上keepAlive属性,如下图
这样在列表里面缓存问题确实解决了,但是出现了个问题,如果不是从返回按钮进入到列表页面的,我们是不需要缓存的,需要重新调接口的
于是考虑能否将返回按钮做成一个公共组件,当点击返回时在路由控制里面来改变keepAlive的值,在Route.beforeEach里面来判断是否是从返回按钮来的,但是经过测试这种方法不可取,第一,第一次进入列表页面时,页面不会缓存,只有第二次才开始缓存,同时我在详情页面里面刷新下,在返回里面的from就变成‘/’,也不能缓存,因此这个方法不可行。后来查询了下keepAlive是在列表页面时才判断是否缓存,而不是从详情页面跳转回列表页面时是否缓存,因此在路由公共里面改keepAlive是不可行的。
这时我们就想到了与keepAlive配套的activated生命周期,只要列表页面路由设置了keepAlive:true,在列表页面都会触发activated,那我们在点击返回按钮时多传个isBack属性,然后通过isBack来判断是否重新初始化加载数据就