vuejs构建的单页面应用history模式子页面微信分享在iOS中遇到的问题

问题描述

在用vuejs做的SPA单页面应用，router模式为history模式，应用是个商城，在进入商品详情页时，第一次进入页面提示签名无效，手动刷新一下就ok，很是烦躁，经过不懈努力，终于解决。

问题分析

微信官方js-sdk文档上是这么写的

然而并没有提到iOS，通过在真机上测试，问题应该是iOS和安卓处理URL的方式不同，安卓手机没有问题，iOS上需要进入商品详情页刷新一下才能正确的进行微信config.

问题解决

如果你有多个页面需要做分享，可以这样做：

// mixins/assign.js

const location = global.location
const u = navigator.userAgent
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

export default {
  beforeRouteEnter(to, from, next) {
    if (isiOS && to.path !== location.pathname) {
      // 此处不能使用location.replace
      location.assign(to.fullPath)
    } else {
      next()
    }
  }
}

然后：

import assign from '@/mixins/assign.js'

export default {
    ...
    mixins: [assign],
    ...
}

这样就完美解决！