以前寫過一篇文章，用來在微信瀏覽器中個性化分享頁面

https://blog.csdn.net/youyudexiaowangzi/article/details/81983974

現在有如下問題：

vue專案在微信瀏覽器中點選分享，只會分享進入到第一個頁面的url，比較笨的辦法是在mount函式裡面加如下處理程式碼

    var pageState = this.$route.query.pageState
    if (1 != pageState) {
      if (pageState) {
        delete this.$route.query.pageState
      }
      
      window.location.href = window.location.href + '&pageState=1'
      return
    }

通過url標識，執行一次跳轉，這樣分享的就是當前頁面了，但是返回的時候會再次經歷一遍，體驗不好，如果只有一個分享頁面也還好。

接下來是我的處理方法，修改vue的router配置

router/index.js

預設匯出函式是

export defaultnew Router({}）

修改為

const router = new Router({})

router.beforeEach(function (to, from, next) {
  const agent = navigator.userAgent
  const isiOS = !!agent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios終端
  //console.log(to.path + ' == ' + location.pathname)
  if (isiOS && ('/reseller' + to.path !== location.pathname) && location.pathname.length < 50) {
    location.assign('/reseller' + to.fullPath)
  } else {
    next()
  }
})

export default router;
 

if程式碼塊中的判斷location.pathname.length < 50可以去掉，除錯用的，除錯不加/reseller導致頁面迴圈跳轉，'/reseller'是我的專案目錄， http://localhost:8080/reseller/login

出現這個問題的原因：

1.當初做微信支付的時候，跳轉連結不能帶有#，所以修改了histroy模式，詳見：

https://blog.csdn.net/youyudexiaowangzi/article/details/81777939

這裡設定base頁面<meta base="/distribute/">  <!-- 多專案情況下加上專案名稱 -->

distribute和reseller是兩個專案，有相通的地方

2.vue專案在微信瀏覽器中無論怎麼跳轉，push、replace。微信的開發單頁應用(SPA)的url不會變，雖然href會變。所以要通過如上程式碼做路由管理，assign會重新載入頁面，但是不會在導航記錄中新加一頁。

順便一提，禁用右上角分享功能

wx.hideMenuItems({
  menuList: ["menuItem:share:timeline", 
    "menuItem:copyUrl", 
    "menuItem:share:appMessage", 
    "menuItem:share:qq", 
    "menuItem:share:weiboApp", 
    "menuItem:favorite", 
    "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"], 
  success:function(){
    console.log('hiden success')
  }, 
  cancel:function(){
    console.log('hiden failed')
  }
})

配置wx使其支援hideMenuItems介面
  var SDKConfig = {
    appId:res.appId, 
    timestamp:res.timestamp, 
    nonceStr:res.nonceStr, 
    signature:res.signature, 
  }

  console.log(imgUrl)

  SDKConfig.debug = false

  SDKConfig.jsApiList = [
    'onMenuShareTimeline',
    'onMenuShareAppMessage',
    'onMenuShareWeibo',
    'onMenuShareQQ',
    'hideMenuItems', //隱藏分享
    'showMenuItems', //顯示分享
    //'scanQRCode', //放開註釋，一進頁面就掃二維碼了
  ]

  wx.config(SDKConfig)

詳見

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

微信JS-SDK說明文件->10.介面操作