iphone 上微信的“複製鏈接”功能複製出來的是修改前的鏈接

問題描述：

在 iOS 系統中，用微信打開了 A 頁面的鏈接，然後由 A 頁面進入 B 頁面

在 B 頁面打開微信右上角菜單，使用“複製鏈接”功能

最後粘貼出來的鏈接是 A 頁面的鏈接

分析原因：

這個問題在微信 6.2 時代就已存在，GitHub 上有很多人到 weui 的主頁提 issue

https://github.com/Tencent/weui/issues/125

https://github.com/wuchangming/blog/issues/1

這兩個 issue 給了我很大的啟發

出現這個問題的原因，是因為微信內置瀏覽器對 history 的支持不夠全面

所以對於開啟了 History Mode 的 SPA 應用，只會保存第一條 url

只要每個頁面都刷新一次，嚴格的說不能是簡單的刷新，需要用 location.replace 刷新頁面，就能解決該問題

解決方案：

在使用了 vue-router 的項目中，添加路由守衛

在每次跳轉結束的時候，給 URL 添加一個隨機參數 wxr，然後執行 location.replace

當 URL 已經有了 wxr 這個參數，就直接載入頁面，避免無限刷新

function wxRefresh (to) {
    // 在鏈接後加一個隨機參數 wxr，以解決 ios 複製鏈接的問題
    let wxr = 'wxr=' + new Date().getTime();
    let url = location.protocol + '//' + location.host + '/page/im' + to.fullPath;
    if (location.search) {
        url = url + '&' + wxr;
    } else {
        url = url + '?' + wxr;
    }
    window.location.replace(url);
}

// 跳轉結束後校驗 wxr 參數
app.router.afterEach((to, from) => {
    !to.query.wxr && wxRefresh(to);
});