KeepAlive说明

KeepAlive说明: <keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

主要用途: 在列表页做数据筛选,然后进入添加或者编辑页面,再回到列表页时,期望列表能保存之前的筛选后的状态。

如何使用:
  1. layout -> AppMain.vue 下添加
    <keep-alive :include="includeModule">
        <router-view />
    </keep-alive>
    
    包裹住所有vue组件
  2. 通过设置 includeexcludeMax属性,控制缓存组件的名称,在现在的项目里,includeModule的存贮在store里面保存,动态添加删除keep-alive缓存的组件.
  3. 在需要做缓存的列表页组件引入混入文件mixins -> KeepAlive -> index.ts
  4. 列表组件内做如下申明:
  public routerName = [/AddStadium/, /EditStadium/, /AddSalePoint/, /EditSalePoint/] // 需要`keep-alve`生效的router name
  public componentName = 'StadiumManage' // 当前组件名称
  public activated() { // 钩子函数,触发更新
    this.getList()
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。