在使用mintUI loadmore的時候,假如上拉加載到第三頁,查看詳情而後後退到列表頁,列表組件重置。可是,有的狀況是須要組件重置的,好比你在另外一個組件添加了一條記錄,那麼再進入這個組件的時候就須要重置組件數據。html
<keep-alive>
包裹動態組件時,會緩存不活動的組件實例,而不是銷燬它們。和 <transition>
類似,<keep-alive>
是一個抽象組件:它自身不會渲染一個 DOM 元素,也不會出如今父組件鏈中。vue文檔地址vue
在router
裏添加meta
設置哪一個組件內數據須要被緩存vuex
{
path: '/exam/record',name: 'examRecord',component: examRecord,
meta:{
title:'考試記錄',
keepAlive:true //是否須要緩存
}
},
{
path: '/exam/type',name: 'examType',component: examType,
meta:{
title:'選擇考試類目'
}
},
複製代碼
在app.vue
里加入api
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
複製代碼
引入vuex
添加一個變量,引入步驟,可查看文檔 vuex緩存
import {mapState , mapMutations} from 'vuex';
state:{
refreshSearch:true, //是否重置列表(考試記錄)
},
mutations:{
//修改refreshSearch的值
setRefreshSearch(state,flag){
state.refreshSearch = flag;
}
}
複製代碼
在/exam/record
組件裏操做,當組件在 <keep-alive>
內被切換,它的 activated
和 deactivated
這兩個生命週期鉤子函數將會被對應執行。因此咱們組件初始化在activated
週期裏操做bash
activated(){
this.loading = false;//容許上拉刷新
//若是refreshSearch的值爲true,則重置列表數據
if(this.refreshSearch){
this.page = 1;
this.getList();
}
},
methods:{
...mapMutations(['setRefreshSearch'])
},
computed:{
...mapState(['refreshSearch'])
}
goDetails(id){
this.setRefreshSearch(false); //進入詳情時 改變refreshSearch的值 使列表組件數據緩存
this.$router.push({path:'/exam/handIn',query:{id:id}});
},
複製代碼
我使用mintUI
的時候出現了個問題,就是在進入詳情頁的時候列表頁一直在接口,不知道是否是<keep-alive>
把列表頁只是作了隱藏狀態,這個我沒弄懂。 因此我在離開頁面的時候加了操做,離開頁面的時候把loading改成trueapp
beforeRouteLeave(to, from, next) {
this.loading = true;
next();
},
複製代碼
重置refreshSearch
值,我是寫在首頁了,若是回到首頁,refreshSearch
值爲true,則下次進入到列表組件的時候,數據重置。函數
import {mapState , mapMutations} from 'vuex';
methods:{
...mapMutations(['setRefreshSearch'])
},
mounted(){
this.setRefreshSearch(true);
},
複製代碼