keep-alive 缓存页面

在实际开发中需要做页面缓存,分很多种情况.比如只缓存页面,不分任何页面跳转过去,数据都保留离开之前的. 或者,只有去某一个页面,返回数据才保留,去其余页面,返回来数据清空或者初始化数据

一. 只需要缓存某个页面

1.首先再router.js 路由里面配置去配置

//在需要缓存的页面路由文件配上keep-alive 
{
    path: '/',
    name: 'Home',
    component: Home,
    meta:{
        keepAlive:true,//判断是否缓存 true 为缓存 false 不缓存
     }
  },

2.在你入口文件App.vue配置.判断keepAlive是true还是false .

//在入口文件App.vue 去判断
<keep-alive> 

      <router-view  v-if="$router.meta.keepAlive" />

</keep-alive>

<router-view  v-if="!$router.meta.keepAlive" />

此时需要需要缓存的页面已经做到了缓存

二.只去某一个页面,数据才缓存.去其他页面不缓存

比如:

 A页面是我们需要缓存的页面 => 去到B页面 =>B页面在返回来数据是没变的

 A页面 =>去到其他页面(如:C,D,E页面) => 在返回A页面,数据初始化或者清空变化了

其实整个思路是 A页面一直做了缓存,只是通过路由钩子做了判断去的哪一个页面,然后再对数据做了处理

1.第一部分操作,和上面的一样,然后第三步

//再需要缓存的A页面写  beforeRouteLeave 离开当前页面触发的路由钩子 因为我们目前的功能是A页面初次进去是没有数据的

 beforeRouteLeave(to,from,next){
  if(to.name !== 'B页面'){ // 判断我从A页面去的不是B页面  
    
       this.table =[]    //把表格数据清空  
    
   }
  
}

最后结果就是,除了从B页面返回A页面是有数据的,其余去A页面表格都是没有数据的

注意:

本身针对于keep-alive 有自身的生命周期,有其余功能可以在这里面去写

1. activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
2. deactivated:  页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

因为项目做的事此功能,想到的方法暂时这个.