keep-alive

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

来源：CSDN

作者：934353403

链接：https://blog.csdn.net/qq_40745143/article/details/103635778