vue hash模式下微信分享後開啟首頁，三種完美解決方案
微信分享功能給我們帶來了很大的便利，使得基於微信開發出來的 H5 頁面可以很好的通過微信平臺進行傳播。所以呢，基本上每個基於微信開發的 H5 都會整合微信分享功能。但是，前幾天在對接微信分享 API 的時候發現了一個大坑。使用 vue 框架開發的應用，分享出去的連結會被截斷：
正常連結：https://hxkj.vip/#/article?article_id=8
分享出去的連結被開啟之後變成了：https://hxkj.vip/?from=singlemessage&isappinstalled=0
對，就是這麼坑。不僅路由被切掉了，引數也沒了。。。。。。
針對以上問題，首先想到的就是網上找方法求救。其中找到一個方法：(本文待分享連結都使用 shareLink
let shareLink = window.location.href.split("#")[0]+"#"+window.location.href.split("#")[1]; // 使用這種方法重新拼接一下當前連線然而，並沒有什麼用，該被切還是被切。於是，就誕生了以下三種有效的方法。
1、全域性路由裡攔截連結
2、前端頁面中轉，重定向
3、藉助後端重定向
一、全域性路由裡攔截連結
1、在 # 號前面加上 ? 號
經過試驗發現，只要在路由的 # 號前面加上 ？號，微信分隔連結的時候只會在域名與引數之間加上 ?from=singlemessage&isappinstalled=0
let shareLink = 'https://hxkj.vip/?#/article?article_id=8';
shareLink = shareLink.replace('/#/', '/?#/');待分享的連結變成了：https://hxkj.vip/?#/article?article_id=8
分享出去之後，連結變成了這個：https://hxkj.vip/?from=singlemessage&isappinstalled=0#/article?article_id=8
發現區別了吧，這次雖然被插入了 ?from=singlemessage&isappinstalled=0
2、正則替換 ?from=singlemessage&isappinstalled=0
這一步需要在 vue 全域性路由裡完成，操作如下：
// router.js
router.beforeEach((to, from, next) => {
let url = window.location.href;
if (url.includes('?from=')) { // 判斷是否攜帶了 from 引數，這一步靈活變通，只要能判斷出是從微信分享連結進來的就 OK
url = url.replace(/vip.+.#/, 'vip/#'); // 利用正則表示式去掉微信攜帶的 ?from=singlemessage&isappinstalled=0 這串引數，如果這串引數對於你當前的頁面有用處的話，可以重新拼接到你正常的連結後面去
window.location.href = url; // 重定向到正常連結
}
})上面這段程式碼的核心在於正則替換 url = url.replace(/vip.+.#/, 'vip/#')，這並不是吃飽了沒事幹，非要寫正則。而是微信分享到每個渠道（微信單人聊天、微信群聊、朋友圈、QQ...）所攜帶的 from 引數是不一樣的，所以需要從域名字尾那裡開始往後匹配，直到 # 號為止。替換之後，就相當於把微信新增上去的那一串引數給刪除了！
以上步驟操作正確的話：
待分享的連結為：https://hxkj.vip/?#/article?article_id=8
分享出去之後，再次開啟分享連結。由於路由那裡做了處理，連結變為為正常狀態：https://hxkj.vip/#/article?article_id=8
二、前端頁面中轉，重定向
1、新建中轉頁
在 public 資料夾裡新建一個 html 頁面（與專案中 index.html 同級），命名為 redirect.html，檔案內容如下：
<script>
let url = location.href.split('?')
let params = url[1].split('&')
let data = {}
params.forEach((n, i) => {
let p = n.split('=')
data[p[0]] = p[1]
})
if (!!data.shareRedirect) {
window.location.href = decodeURIComponent(data.shareRedirect)
}
</script>因為只作為跳轉使用，所以不需要其他的東西，只需要寫 js 就可以了
2、組裝分享連結
把要分享的連結，設定為中間頁面的路徑
let shareLink = 'https://hxkj.vip/#/article?article_id=8';
shareLink = window.location.href.split('#')[0] + 'redirect.html?shareRedirect=' + encodeURIComponent(shareLink);這個方法，比第一個方法多了箇中間頁，總體來說，還是比較方便的。
以上步驟操作正確的話：
待分享的連結為：https://hxkj.vip/redirect.html?shareRedirect=https%3A%2F%2Fhxkj.vip%2F%3F%23%2Farticle%3Farticle_id%3D8
分享出去之後，再次開啟分享連結。由於中間頁面做了重定向處理，連結變為為正常狀態：https://hxkj.vip/#/article?article_id=8
三、藉助後端重定向
let shareLink = 後端地址;這種方法相對於第二種方法，沒有本質的區別。只是相當於把重定向那一步放到後端去處理了。頁面分享的連結為後端同事給出來的地址。
四、總結
At last，看完之後有什麼不懂的，可以留言反饋。
轉載請註明出處：https://www.jianshu.com/p/97729dd2c94d
作者：TSY
個人空間：https://hxkj.vip