keep-alive

720 阅读1分钟

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函数更新数据