h5 区分 app 所在设备 和 app 交互 and vue-router 在微信浏览器中操作history URl未改变的解决方案

一，区分ios设备和android 设备

export function iosOrAndroid() {

 var ua = navigator.userAgent;

 if (/(iPhone|iPad|iPod|iOS)/i.test(ua)) { // 苹果端

 return 'ios'

 } else if (/(Android)/i.test(ua)) { // 安卓端

 return 'android'

 } else { // pc端

 return 'pc'

 }

}

二，h5 给 ios 和 android 传参

ios : window.webkit.messageHandlers.toShare.postMessage(data);

android : window.youFan.toShare(data);

data:  数据

toShare: 和客户端（ios , android ） 约定好的方法名称（自定义）

youFan: (囿范app )  和客户端（ios, android） 约定好的 方法名称

三，vue单页面 跳转到app 

let goodsId = this.$route.params.goodsId;

var browser = navigator.userAgent.toLowerCase();

//ios

if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {

if(browser.match(/micromessenger/i) || browser.indexOf('qq') > -1) {

//微信内置浏览器 或者 qq内置浏览器(跳转引导页)

this.$router.push({

name: 'bootPage',

query: {

goodsId: goodsId

}

})

} else {

window.location.href =`h5methods20190103://?targetType=3&targetContent=${goodsId}`; //ios app协议，由ios同事提供

window.setTimeout(function() {

window.location.href = 'https://itunes.apple.com/cn/app/id1133210393?mt=8'

}, 2000)

}

}

// Android

if(navigator.userAgent.match(/android/i)) {

if(browser.match(/micromessenger/i) || browser.indexOf('qq') > -1) {

// 微信内置浏览器 或者 qq内置浏览器

this.$router.push({

name:'bootPage',

query: {

goodsId: goodsId

}

})

} else {

window.location.href = `huigouandroid://bfdl/?targetType=3&goodsId=${goodsId}`; //安卓协议，由安卓同事提供

window.setTimeout(function() {

window.location.href = 'http://app.huigo8.com/downloads/huigo8.apk'

}, 2000)

}

}

            //  vue-router在微信中的使用问题,在微信中不记录页面切换时的地址切换

           // vue-router 在微信浏览器中操作history URl未改变的解决方案

created() {

setTimeout(() => {

window.location = window.location;

},500)

}