公众号开发 部分iPhone上微信的“复制链接”功能复制出来的是

问题场景：
  在 iOS 系统中，用微信打开了 A 页面的链接，然后由 A 页面进入 B 页面
  在 B 页面打开微信右上角菜单，使用“复制链接”功能
  最后粘贴出来的链接是 A 页面的链接

分析原因：

因为微信内置浏览器对 history 的支持不够全面
所以对于开启了 History Mode 的 SPA 应用，只会保存第一条 url
只要每个页面都刷新一次，严格的说不能是简单的刷新，需要用 location.replace 刷新页面，就能解决该问题

解决方案：

  在使用了 vue-router 的项目中，添加路由守卫
  在每次跳转结束的时候，给 URL 添加一个随机参数 wxr，然后执行 location.replace
  当 URL 已经有了 wxr 这个参数，就直接加载页面，避免无限刷新

let wxRefresh =  (to) =>  {
    // 在链接后加一个随机参数 wxr，以解决 ios 复制链接的问题
    let wxr = 'wxr=' + new Date().getTime();
    let url = location.protocol + '//' + location.host + process.env.VUE_APP_BASE_URL + 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=[-]{}/g, '');
    window.history.replaceState({}, document.title, url);
}
// 然后在 mounted 或者 created 中调用这个方法就好了
created () {
    this.setCurrentUrl()
}

注意：我发现在created中将url还原为正常的地址，会导致部分ios（实测是iPhone13）的二次分享失效，建议不还原，废弃掉setCurrentUrl方法

原文链接：https://www.likecs.com/show-467391.html