vue使⽤keep-alive缓存页⾯，返回页⾯时刷新部分数据
　作⽤：
  在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="$a.keepAlive">
<!-- 这⾥是会被缓存的视图组件，⽐如 Home！ -->
</router-view>
</keep-alive>
<router-view v-if="!$a.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.Item('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 = de;
this.bill_country = untry;
var $bill_addr = this.bill_state+this.bill_city+this.bill_street;
  veItem("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="请输⼊省/州"
/>react router缓存
</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" >
确认
</van-button>
</div>
</template>
<script>
export default {
data() {
return {
street: '',
pobox:'',
city:'',
state:'',
code:'',
country:'',
mode:''
};
},
created() {
this.street=this.$route.query.street;
this.pobox=this.$route.query.pobox;
this.city=this.$route.query.city;
this.state=this.$route.query.state;
},
methods: {
onSave() {
var data ={
'mode':de,
'street':this.street,
'pobox':this.pobox,
'city':this.city,
'code':de,
'state':this.state,
'country':untry,
};
sessionStorage.setItem('addr',JSON.stringify(data));                history.back();
},
},
};
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。