作用：
在vue項目中,難免會有列表頁面或者搜索結果列表頁面,點擊某個結果之后,返回回來時,如果不對結果頁面進行緩存,那么返回列表頁面的時候會回到初始狀態,但是我們想要的結果是返回時這個頁面還是之前搜索的結果列表,這時候就需要用到vue的keep-alive技術了.
介紹：
keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。
實際項目中,需要配合vue-router共同使用.
router-view 也是一個組件，如果直接被包在 keep-alive 里面，所有路徑匹配到的視圖組件都會被緩存：
<keep-alive>
<router-view>
<!-- 所有路徑匹配到的視圖組件都會被緩存！ -->
</router-view>
</keep-alive>
生命周期執行順序：
1、不使用keep-alive的情況：beforeRouteEnter --> created --> mounted --> destroyed
2、使用keep-alive的情況：beforeRouteEnter --> created --> mounted --> activated --> deactivated
3、使用keep-alive，並且再次進入了緩存頁面的情況：beforeRouteEnter -->activated --> deactivated
路由配置
1、在項目下的router文件下的index.js進行配置
// 路由配置 export default [ { path: '/', name: 'home', component: Home, meta: { keepAlive: true // 需要被緩存 } }, { path: '/:id', name: 'edit', component: Edit, meta: { keepAlive: false // 不需要被緩存 } }
2、App.vue中改為
<keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 這里是會被緩存的視圖組件，比如 Home！ --> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"> <!-- 這里是不被緩存的視圖組件，比如 Edit！ --> </router-view>
3、這時凡是被keep-alive包裹住的頁面都會被緩存，如果想刷新部分內容要啟用activated函數，用法同created，activated只有在被keep-alive包裹時會觸發，activated函數一進入頁面就觸發
示例:點擊郵寄地址-進入地址編輯頁面-編輯后把數據傳給父頁面，並且父頁面不刷新，只是地址更新
地址編輯頁面
父頁面代碼：edit.vue
<van-field is-link :name="item.name" :label="item.label" :placeholder="item.label" :required=item.mandatory v-model="dataList[item.name]" @click="editAddr(item.name)" />
<script>
export default {
data() {
return {
name:'',
}
},
methods: {
editAddr(name) {
var query_data={};
query_data= {
street: this.bill_street,
pobox: this.bill_pobox,
city: this.bill_city,
state: this.bill_state,
code: this.bill_code,
country: this.bill_country,
}
this.$router.push({
path: '/address_edit',
query:query_data
});
}
},
activated() {
// 需要重新請求的寫在這里
var addr_data = JSON.parse(sessionStorage.getItem('addr'));
this.bill_street = addr_data.street;
this.bill_pobox = addr_data.pobox;
this.bill_city = addr_data.city;
this.bill_state = addr_data.state;
this.bill_code = addr_data.code;
this.bill_country = addr_data.country;
var $bill_addr = this.bill_state+this.bill_city+this.bill_street;
sessionStorage.removeItem("addr");
},
}
</script>
地址編輯頁面：AddressEdit.vue
<template>
<div class="addr_edit">
<van-cell-group>
<van-field
v-model="street"
rows="1"
autosize
label="詳細地址"
type="textarea"
placeholder="請輸入詳細地址"
/>
</van-cell-group>
<van-cell-group>
<van-field
v-model="pobox"
label="郵政信箱"
placeholder="請輸入郵政信箱"
/>
</van-cell-group>
<van-cell-group>
<van-field
v-model="city"
label="城市"
placeholder="請輸入城市"
/>
</van-cell-group>
<van-cell-group>
<van-field
v-model="state"
label="省/州"
placeholder="請輸入省/州"
/>
</van-cell-group>
<van-cell-group>
<van-field
v-model="code"
label="郵政編碼"
placeholder="請輸入郵政編碼"
/>
</van-cell-group>
<van-cell-group>
<van-field
v-model="country"
label="國家"
placeholder="請輸入國家"
/>
</van-cell-group>
<van-button round block type="info" @click="onSave" style="margin-top: 2px">
確認
</van-button>
</div>
</template>
<script>
export default {
data() {
return {
street: '',
pobox:'',
city:'',
state:'',
code:'',
country:'',
mode:''
};
},
created() {
this.mode=this.$route.query.mode;
this.street=this.$route.query.street;
this.pobox=this.$route.query.pobox;
this.city=this.$route.query.city;
this.state=this.$route.query.state;
this.code=this.$route.query.code;
this.country=this.$route.query.country;
},
methods: {
onSave() {
var data ={
'mode':this.mode,
'street':this.street,
'pobox':this.pobox,
'city':this.city,
'code':this.code,
'state':this.state,
'country':this.country,
};
sessionStorage.setItem('addr',JSON.stringify(data));
history.back();
},
},
};
</script>