KeepAlive說明: <keep-alive>
包裹動態(tài)組件時,會緩存不活動的組件實例,而不是銷毀它們。
主要用途: 在列表頁做數(shù)據(jù)篩選靡挥,然后進入添加或者編輯頁面,再回到列表頁時鸯绿,期望列表能保存之前的篩選后的狀態(tài)跋破。
如何使用:
- 在
layout -> AppMain.vue
下添加
包裹住所有vue組件<keep-alive :include="includeModule"> <router-view /> </keep-alive>
- 通過設置
include
、exclude
和Max
屬性,控制緩存組件的名稱瓶蝴,在現(xiàn)在的項目里毒返,includeModule
的存貯在store里面保存,動態(tài)添加刪除keep-alive
緩存的組件. - 在需要做緩存的列表頁組件引入混入文件
mixins -> KeepAlive -> index.ts
- 列表組件內做如下申明:
public routerName = [/AddStadium/, /EditStadium/, /AddSalePoint/, /EditSalePoint/] // 需要`keep-alve`生效的router name
public componentName = 'StadiumManage' // 當前組件名稱
public activated() { // 鉤子函數(shù)囊蓝,觸發(fā)更新
this.getList()
}