KeepAlive说明: <keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
主要用途: 在列表页做数据筛选,然后进入添加或者编辑页面,再回到列表页时,期望列表能保存之前的筛选后的状态。
如何使用:
- 在
layout -> AppMain.vue
下添加
包裹住所有vue组件<keep-alive :include="includeModule"> <router-view /> </keep-alive>
- 通过设置
include
、exclude
和Max
属性,控制缓存组件的名称,在现在的项目里,includeModule
的存贮在store里面保存,动态添加删除keep-alive
缓存的组件. - 在需要做缓存的列表页组件引入混入文件
mixins -> KeepAlive -> index.ts
- 列表组件内做如下申明:
public routerName = [/AddStadium/, /EditStadium/, /AddSalePoint/, /EditSalePoint/] // 需要`keep-alve`生效的router name
public componentName = 'StadiumManage' // 当前组件名称
public activated() { // 钩子函数,触发更新
this.getList()
}