APP.vue
<keep-alive :include="keepAliveInclude">
<router-view class="router-view" />
</keep-alive>
data() {
return {
keepAliveInclude: ["Home"]//匹配的路由名称
}
},
home.vue
//activated:在vue对象存活的情况下,每次进入页面就触发;可用于初始化页面数据等
activated() {
this.getInitInfo(); //获取首页信息
},
//不需要每次进入都更新数据,将接口请求写在mounted中
mounted() {
this.getInitInfo(); //获取首页信息
},
//退出登录清空keep-alive缓存;
this.$parent.keepAliveInclude = [];
页面切走后home.vue并没有销毁,数据也没有丢失。
再次进入页面后触发activated函数更新数据