|
?页面缓存应用场景:?
? ? ? ? A: 大列表页面B: 列表页 C: 详情页
? ? ? ? 从A到B(默认是设置缓存的)此时页面缓存
? ? ? ? 再到B到C(设置缓存),C回到B(列表页不刷新，在原来位置)
? ? ? ? 此时从B再次进入C，会发现页面还是第一次缓存的数据，所以我们用如下方法可以有效
????????解决此问题,代码逻辑思路是这样子的：
? ? ? ? 第一次从B到C时设置缓存，返回到列表页时该页面是缓存位置不变，返回到大列表页A时不缓存，再次进入B列表页就默认设置缓存进入详情也设置缓存，只要不是详情页就为false，很简单，目前在真实项目里使用一段时间，没出现过bug。如有问题请联系我。
// 1. 配置路由某个需要缓存的页面里面的keepAlive默认为true
{
??????path:?'/competitionDetail/:type/:id',
??????name:?'CompetitionDetail',
??????component:?()?=>?import('@/pages/atlasPage/competitionDetail'),
??????meta:?{
????????requiresAuth:?false,
????????title:?'摄影大赛',
????????keepAlive:?true?//?需要缓存
??????}
????},
// 第二步在CompetitionDetail页面配置此项（跟methods同级）：
methods:{
iSKeepAlive(name,?keepAlive)?{
??????this.$router.options.routes.map(v=>{
????????if(v.name?==?name){
??????????v.meta.keepAlive?=?keepAlive;
????????}
??????})
????},
}??
beforeRouteLeave(to,?from,?next)?{
????//?导航离开该组件的对应路由时调用
? ? // 判断进入两个详情页的时候把keepAlive变为true否侧就改为false
? ? // 这样就从详情页返回到列表页设置缓存，如果不在详情页里就是false不缓存
????if?(to.name?==?"SignUp"?||?to.name=="TravelNotes")?{
? ? ?// 调用方法传相应参数
??????this.iSKeepAlive("CompetitionDetail",?true);
????}?else?{
??????this.iSKeepAlive("CompetitionDetail",?false);
????}
????next();
??},
|