vue优雅实现缓存方案

需求:

需求描述

实现

  1. 路由切换添加keep-alive组件
<keep-alive :max="1">
   <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

注意::max=1,为只缓存一个组件,很重要;

  1. 所有的路由添加keepAlice字段,列表路由值为true,新增编辑页面值为false,
{
        path: '/operationLog',
        name: 'OperationLog',
        meta: {
          title: '日志管理',
          keepAlive:true
        },
        component: () => import('@/viewst/log/operationLog')
      }
  1. 从编辑页面回到列表页,需要请求后台数据;
//利用keep-alive的生命周期;
activated(){
      this.getMedicalPersonList();	//这个函数就是请求列表数据;
    }

总结:主要运用了keep-alive的 max和生命周期activated函数;
1.当从A 跳转到B 列表时,因为只能缓存一个组件,所以B页面缓存,A页面取消缓存,当B页面再到A页面时,A页面因没有缓存,从而从新加载
2.当跳转到A页面,从A页面到跳转到 编辑/新增 页面时,A页面有缓存, 编辑/新增页面不缓存,当前缓存的还是A页面,返回到A页面时,A页面不刷新,但是keep-alive的activated生命周期函数会被调用,在里面可以从新请求当前搜素条件的列表
注:第一次进入A页面时,activated函数也会被调用,在munted之后,所以activated里的请求在munted中就不要请求,要不就会出现两次相同的请求;

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页