vue 單頁面應用分享

vue 單頁面應用分享

微信分享對 hash 路由不太友好，分享經常失敗，記錄一次踩坑過程

hash(哈希路由的處理)

只需要把分享的鏈接 # 替換成 ?#
比如要分享的鏈接是:http://test.com/dist/#/index/index。只需要改成 http://test.com/dist/?#/index/index 問題即可解決

---

微信驗籤失敗的問題

我們要用微信分享，需要配置合法域名，JS 安全域名，生成 APPID 和密鑰，然後由服務端把對應信息傳給微信，生成對應的加密信息傳給前端。
如果以上需要的東西都排除沒問題後，那問題可能就出在驗籤的鏈接！

【重點！！】 驗籤的時候需要傳遞一個前端的 url
比如當前要分享的頁面也是 http://test.com/dist/#/index/index

那麼我們要傳過去驗籤的路徑應該爲 : http://test.com/dist。即 # 前面的一段

---

微信配置成功，可是分享出去的標題，圖片不是預期設置的

如果一路按着微信文檔來，應該不會出現大問題，出現這個問題的原因，很有可能就是，分享的方法沒寫在 wx.ready 裏面

因爲 wx.config 是一個異步方法，wx.onMenuShareAppMessage 等方法要放在 wx.ready 裏面

微信第一次分享成功，從分享鏈接進去後二次分享失敗

出現這個問題，是因爲分享出去後的鏈接，微信會自動多拼接一些參數，標識是從哪裏進的鏈接,如下：
http://test.com/dist/?from=singlemessage#/index/index

注意中間的 from=singlemessage。如果鏈接一直攜帶這個參數，那後面的鏈接都很有可能分享失敗

要解決也很簡單，只需要把鏈接的微信的參數去掉
根據 vue-router.所以我們的鏈接通常不會在 # 之前攜帶 ?參數。只需要在main.js進行 url 攔截並處理即可

直接貼出我的代碼：

router.beforeEach((to, from, next) => {
  // 微信分享攜帶的其他參數
  if (window.location.search) {
    window.location.href =
      window.location.origin + window.location.pathname + "#" + to.fullPath
  } else {
    next()
  }
})

---

解決了這些，就可以愉快的進行分享了~