app.vue
<keep-alive :include="keepAliveInclude">
<router-view class="router-view" />
</keep-alive>
data() {
return {
keepAliveInclude: ["Home"]//匹配的路由名称
}
},
home.vue
// activated , deactivated 这两个生命周期函数一定是要在使用了keep-alive组件后才会有的,否则则不存在
// 当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,
// 退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。
activated() {
this.getInitInfo(); //获取首页信息
},
deactivated() {
},
//不需要每次进入都更新数据,将接口请求写在mounted中
mounted() {
this.getInitInfo(); //获取首页信息
},
//退出登录清空keep-alive缓存;
this.$parent.keepAliveInclude = [];
页面切走后home.vue并没有销毁,数据也没有丢失。 再次进入页面后触发activated函数更新数据