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],
    ...
}

這樣就完美解決！