h5返回不执行mounted生命周期的问题

## 问题描述

> 最近在做一个h5的项目，页面是嵌入到企业微信中的，其中有一个活动主页，从这个页面可以进入到另一生成海报页面，然后再从海报页面用浏览器自带的返回到活动主页，再返回时不调用页面接口了，在活动主页有判断是否登录的接口，如果不登录会显示登录按钮让用户去登录，因为一开始从活动主页跳转到海报页面时是登录状态，现在从海报页面返回时登录状态失效了！！！但是再刷新页面确实是登录状态，只是返回时不走mounted生命周期了，因不产品要求既然是登录状态，那返回时就不要显示登录按钮。

## 解决方案

1. 一开始我一直以为它返回时不调用mounted生命周期，但其实在调试时我发现返回时是走mounted生命周期的，只是mounted中调用了initPage()方法，这个初始化有调用几个接口，判断是否有资格、获取userId、获取邀请详细及邀请记录等接口，调试时发现程序走到中间不走了，也不知道是为什么？？？？？

程序如下：

```javascript

mounted() {

this.initPage();

// alert("mounted实例运行"); //此句在initPage()方法调用接口返回数据前调用，因为调用接口返回数据是异步的

methods: {

async initPage() {

try {

if (this.sign || this.token) {

const canShareRes = await getQualificationToShare({

sign: this.sign,

token: this.token === "" ? null : this.token

});

if (canShareRes.status === 200) {

if (canShareRes.data.status === 200 && canShareRes.data.result) {

this.canShareTag = true;

}

let res = await getUserId({

sign: this.sign,

token: this.token === "" ? null : this.token

});

if (res.data.success) {

const { id } = res.data.resultObject;

this.userID = id;

if (!this.isApp()) {

this.initShare(res.data.resultObject);

}

this.getInviteTopData({

sign: this.sign,

token: this.token === "" ? null : this.token

});

this.getList({

sign: this.sign,

token: this.token === "" ? null : this.token

});

} else {

//res.data.success===false sign过期去cookie中取sign值，再去调用getCurrentUser接口获取userId

this.sign = getCookie("sign") || localStorage.getItem("sign") || "";

let getCurrentRes = await getUserId({

sign: this.sign,

token: this.token === "" ? null : this.token

});

if (getCurrentRes.data.success) {

this.userID = getCurrentRes.data.resultObject.id;

if (!this.isApp()) {

this.initShare(res.data.resultObject);

}

this.getInviteTopData({

sign: this.sign,

token: this.token === "" ? null : this.token

});

this.getList({

sign: this.sign,

token: this.token === "" ? null : this.token

});

}

} else {

//未登录分享领券页面，页面内容显示券已领完

if (!this.isApp()) {

this.initShare({ id: null });

}

} catch (e) {

console.log(e);

}

```

2. 因为是nuxt项目，想着用keep-alive不管用，就一直没用keep-alive，后来google了下说h5返回就是有这个问题的，有人用了keep-alive解决了，所以就想着用keep-alive，想着在跳转页面之前把页面一部分包裹在组件中，这样返回时不调用mounted,但是可以调用activated生命周期的，把写在mounted中的initePage()移到activated中。代码如下：

```javascript

<keep-alive>

<share-record

:hasInviteData="hasInviteData"

:inviteData="inviteData"

:userID="userID"

:inviteList="inviteList"

:isEnd="isEnd"

:sign="sign"

:token="token"

></share-record>

</keep-alive>

//js

mounted() {

this.initPage();

activated() {

this.initPage();

// alert("activated生命周期");

```

> 注意：问题是我返回时activated中的alert并没有执行，但是确实可以调用接口了，这里我觉得应该是子组件和父组件渲染顺序的问题了。父组件和子组件渲染的顺序是：父组件beforeCreate -> 父组件created -> 父组件 beforeMount -> 子组件beforeCreate -> 子组件created -> 子组件 beforeMount -> 子组件mounted -> 父组件mounted

如下图：