问题描述: A页面跳转到B页面,在B页面进行了相关的操作之后,返回到A页面,A页面的数据没有刷新.具体实例:

由于项目中使用了vue，使用了gulp和普通的页面跳转。并没有引入vue-router。所以不能使用 watch监控$router。

微信公众号ios点击后退按钮，优选读取缓存，所以vue里的生命周期不会在进行调用。

所以项目中执行隐藏分享qq，空间。等功能不被再次执行。

原因分析:

一.android 浏览器 包括微信的开发者工具 都是ok的返回可以刷新页面但是唯有iOS不行.

二.iOS 浏览器原因：history.go(-1)返回上一页后，页面内容并不会刷新。在B页面修改的内容，返回到A时并没有更新新的内容，必须手动刷新。

在Debug模式下，发现在iOS浏览器中，返回上一页后，页面的 JS 代码并未执行。我们猜测可能是缓存引起的，于是使用 meta 禁止了缓存，但仍然没有效果。于是进一步猜测可能是浏览器内部机制导致——iOS为了提升浏览网页的效率，可能给已浏览过的网页添加一个类似快照的东西，当点击返回按钮后，直接调用快照展示给用户，省去了执行JS这一步骤(纯静态文件依然被缓存)。这本来是iOS的优势,在这却变成了bug存在的风险.

三.页面数据是通过 ajax 请求后台数据，通过链接跳到下一页，然后返回，

最常用的返回上一页的方法：history.go(-1)和 history.back(),

在 android 中正常显示上一页，但是在 iOS 中不能正常显示，通过打印

返回的数据，发现数据是上一个页面最后请求的数据。

解决方法:

在回退后需要刷新的页面加以下js:

$(function () {

var isPageHide = false;

window.addEventListener('pageshow', function () {

if (isPageHide) {

window.location.reload();

}

});

window.addEventListener('pagehide', function () {

isPageHide = true;

});

})

将上边的代码写在A页面的js文件中

即可实现想要的效果.如下不需要手动刷新就可以实现

作者：上善_若水

链接：https://www.jianshu.com/p/b5c...

来源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

备注：我的项目代码

window.localStorage.removeItem ("openIdItem");

window.localStorage.removeItem ("foodMatchtype");

window.localStorage.removeItem ("peicaned");

// window.localStorage.removeItem ("userInfoNeed");

window.localStorage.setItem("openIdItem",JSON.stringify(getUrlParam("openId")))

var openIdItem = window.localStorage.getItem("openIdItem")

window.localStorage.setItem("foodMatchtype",JSON.stringify("5"))

new Vue({

el: "#containerBox",

data: {

imageUrl:"",

planInfos:[],

mealInfos:[],

advantageInfos:[],

proEndorsement:[],

userInfoNeed:{},

appScope:"",//人群范围

planName:"",//方案名称

isContentShow:false,//content内容默认不显示

chanType: "fwh",

url: location.href,

openId:""

},

created(){

},

mounted:function(){

this.wxConfig()

this.$nextTick(function(){

//显示loading

showLoading();

this.getInitData();

})

},

methods:{

start:function(){

window.location.href = "./views/condition.html"

},

getInitData(){

/*

0 高血脂

1 糖尿病

2 肥胖

3 痛风

4 高血压

5 成人

*/

var param={"type":22}

ajaxRequest('/v2/foods/matching/index.do', "POST",param,(data)=>{

console.log(data,"initdata");

if(data.retCode=="SUCCESS"){

//数据赋值

this.imageUrl = data.imageUrl;

this.planInfos = data.planInfos;

this.mealInfos = data.mealInfos;

this.advantageInfos = data.advantageInfos;

this.proEndorsement = data.proEndorsement;

this.planName = data.planName;

document.title = data.planName;

this.appScope = data.appScope[0];

// console.log(this.appScope,"data",data)

// 基础信息配置

this.userInfoNeed = data.userInfoNeed;

window.localStorage.setItem("userInfoNeed",JSON.stringify(this.userInfoNeed))

window.localStorage.setItem("openIdItem",openIdItem)

window.localStorage.setItem("foodMatchtype",JSON.stringify("5"))

//隐藏loading

hideLoading();

this.isContentShow = true;

}else{

this.isContentShow = false;

showTip(data.retInfo);

}

})

},

//微信配置

wxConfig (){

/**

* 获取微信公众号配置

* @param {String} url

* @param {String} chanType 渠道类型

* */

// var foodMatchtype = 5;

// var openIdItem = getUrlParam("openIdItem");

$.ajax({

url: CONFIG.wx,

data: JSON.stringify({"chanType":this.chanType,"url":decodeURIComponent(this.url)}),

type: "post",

contentType: "application/json",

success: (data) =>{

if (data.retCode == "SUCCESS") {

// window.localStorage.setItem("openIdItem",data.wxConfig.appId)

// this.openId=data.wxConfig.appId;

wx.config({

debug: false,

appId: data.wxConfig.appId,

timestamp:data.wxConfig.timestamp,

nonceStr: data.wxConfig.nonceStr,

signature: data.wxConfig.signature,

jsApiList: ["checkJsApi","showMenuItems","hideAllNonBaseMenuItem","showMenuItems","hideMenuItems","chooseWXPay","onMenuShareTimeline","onMenuShareAppMessage","chooseImage","getNetworkType"]

});

//处理验证失败的信息

wx.error( (res) => {

console.log('验证失败返回的信息:',res);

});

wx.ready(function () {

wx.hideMenuItems({

menuList: [ "menuItem:share:qq","menuItem:share:weiboApp","menuItem:share:facebook","menuItem:share:QZone","menuItem:editTag","menuItem:delete", "menuItem:copyUrl","menuItem:originPage", "menuItem:readMode","menuItem:openWithQQBrowser","menuItem:openWithSafari","menuItem:share:email","menuItem:share:brand"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3

});

wx.showMenuItems({

menuList: ["menuItem:share:appMessage","menuItem:share:timeline"]

})

wx.onMenuShareTimeline({

title: '减约健康饮食推荐', // 分享标题

desc: '一周饮食搭配，上万种单品选择，都在这里', // 分享描述

link: CONFIG.wxUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

imgUrl: CONFIG.imgUrl ,

success: function () {

// 设置成功

},

fail: function (err) {

}

})

// 测试：http://h5static.cs.jianzhishidai.cn/jkyy-foodmatchs/foodmatch/index.html?openIdItem=50310&foodMatchtype=2

// 生产：https://h5static.jianzhishidai.cn/foodmatch/index.html?openIdItem=50223332310&foodMatchtype=0

wx.onMenuShareAppMessage({

title: '减约健康饮食推荐', // 分享标题

desc: '一周饮食搭配，上万种单品选择，都在这里', // 分享描述

link: CONFIG.wxUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

imgUrl: CONFIG.imgUrl ,

success: function () {

// 设置成功

},

fail: function (err) {

}

});

});

function GetMatchingStats(id,cb){

var param={"type":"5","openId":getUrlParam("openId")};

ajaxRequest('/v2/food/matching/user/status/find.do', "POST", param, function (data) {

if(data.retCode=="SUCCESS"){

if(data.foodMatch){

var foodMatch = data.foodMatch;

var foodMatchStatus = foodMatch.foodMatchStatus;//配餐状态

cb(foodMatchStatus)

}

}else{

showTip(data.retInfo);

}

})

}

if(!window.localStorage.getItem("peicaned")&&!getUrlParam("twojoin")){

GetMatchingStats("2",function(foodMatchStatus){

if(foodMatchStatus == 1){

localStorage.setItem("peicaned",true);

console.log(!window.localStorage.getItem("peicaned"),!getUrlParam("twojoin"))

window.localStorage.setItem("openIdItem",openIdItem);

window.localStorage.setItem("foodMatchtype",JSON.stringify("5"))

// window.location.href="views/weekdiet.html";

window.location.replace("views/weekdiet.html")

}else{

$("body").css("display","block");

}

})

}else{

$("body").css("display","block");

}

} else {

showTip(data.tooltip);

}

},

fail: function (err) {

}

});

},

},

});