vue 缓存

vue自带缓存机制 keep-alive

需求

缓存页面 B页面
A页面跳到 - B页面 === 刷新数据
B页面跳到 - C页面 - 返回B页面 === 数据保留不刷新

适用场景

预览页 - 编辑页 - 确认页

使用 keep-alive进行缓存

定义缓存页面

router路由里 为缓存页面设置meta.keepAlive 为true
不缓存的页面可以不设置

    <keep-alive>
      <router-view :key="key" v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <router-view :key="key" v-if="!$route.meta.keepAlive"/>

      {
        path: 'sample-edit/:id',
        name: 'sample-edit',
        hidden: true,
        component: () => import(/* webpackChunkName: 'sampleManage' */ '@/views/sample-manage/SampleEdit.vue'),
        meta: {
          title: '试用商品编辑',
          keepAlive: true, //此路由开启缓存
          isBack:false,   //isBack用于定义是否为B页面返回
        }
      },

以上代码B页面缓存一定存在，若不存在，可能keep-alive位置放错

数据不缓存
可能情况 使用缓存位置为router里某个组件而非 app整个页面
解决方法
找到具体要缓存router-view 在该router-view上加上keep-alive
错误示例: 如图
当前页面为SampleEdit 页面的位置应该为AppMain下面router-view

实现对缓存页面刷新

了解vue缓存的生命周期

当引入keep-alive时，页面第一次进入，钩子的触发顺序是created-> mounted-> activated。
当再次进入该页面时，只触发 activated 和 deactivated
可以在 activated 对缓存页面进行刷新

实现指定页面不缓存

beforeRouteEnter官方解释

beforeRouteEnter 在被激活的组件里调用
在渲染该组件的对应路由被 confirm 前调用
不！能！获取组件实例 this
因为当守卫执行前，组件实例还没被创建
用此钩子判断跳转页面

  beforeRouteEnter (to,from,next){
  	// to 将要去的组件路由信息
    // from 来源的组件路由信息	
    if(from.name === 'sample-confirm'){   //如果上一个页面是sample-confirm  `C页面` 则页面缓存保存，否则刷新页面
      to.meta.isBack = true;
    }else{
      to.meta.isBack = false;
    }    
    next();一定要加  用来访问组件实例
  },
  //在activated里判断isBack来确定是否刷新页面
   activated(){
    if(!this.$route.meta.isBack){
	//刷新页面处理
    }
  },