問題描述：vue
在 iOS 系統中，用微信打開了 A 頁面的連接，而後由 A 頁面進入 B 頁面ios
在 B 頁面打開微信右上角菜單，使用「複製連接」功能git
最後粘貼出來的連接是 A 頁面的連接github
分析緣由：vue-router
這個問題在微信 6.2 時代就已存在，GitHub 上有不少人到 weui 的主頁提 issuevuex
https://github.com/Tencent/weui/issues/125瀏覽器
https://github.com/wuchangming/blog/issues/1微信
這兩個 issue 給了我很大的啓發app
出現這個問題的緣由，是由於微信內置瀏覽器對 history 的支持不夠全面ui
因此對於開啓了 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); });
另外，在頁面內須要將 url 還原爲正常的地址
能夠在 vuex 或者第三方 js 中添加一個公用方法
setCurrentUrl: () => { // 刪除 url 中手動添加的隨機數 wxr let url = location.href.replace(/&wxr=[0-9]{13}/g, ''); window.history.replaceState({}, document.title, url); }
而後在 mounted 或者 created 中調用這個方法就行了