问题描述：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 中调用这个方法就行了