Vue 路由 hash 模式在微信 H5 页面分享时 iOS 异常，如何解决？

作者站长头像
站长
· 阅读数 28

Vue 中路由使用 hash 模式，开发微信 H5 页面分享时在安卓上设置分享成功，但是 iOS 的分享异常。

iOS 当前页面分享给好友，点击进来是正常，如果二次分享，则跳转到首页；使用 vue router 跳转到第二个页面后在分享时，分享设置失败；以上安卓分享都是正常。

简单分析一下问题，jssdk 是后端进行签署，前端校验，但是有时跨域，ios 是分享以后会自动带上 from=singlemessage&isappinstalled=0 以及其他参数，分享朋友圈参数还不一样，貌似系统不一样参数也不一样，但是每次获取 url 并不能获取后面这些参数

回复
1个回答
avatar
test
2024-06-18

你这个问题是因为跨域问题导致，重定向失败。

有两种解决方案，希望能帮助你。

解决方案优化

方案1: 使用 window.location.href 进行跳转

可以使用 window.location.href 进行跳转，而不是使用 Vue Router 的 this.$router.push。这样可以确保地址栏的地址与当前页一致，从而可以成功分享页面。这种方法适用于需要分享的页面较少的情况。作为一个单页应用，这样的刷新页面跳转方式依然可行。

示例代码：

// 旧方法: this.$router.push('/new-page');
// 新方法: 使用 window.location.href 跳转
window.location.href = '/new-page';

方案2: 保存在本地的入口地址

在用户首次进入应用时，将入口地址保存在本地存储中。当需要获取签名时，从本地存储中取出入口地址。注意，只在刚进入单页应用时保存入口地址。

示例代码：

// 仅在用户首次进入应用时保存入口地址
if (!sessionStorage.getItem('initialHref')) {
  const href = window.location.href;
  sessionStorage.setItem('initialHref', href);
}

// 需要获取签名时，从本地存储中取出入口地址
const initialHref = sessionStorage.getItem('initialHref');

通过这种方法，可以确保每次获取签名时使用的都是用户首次进入应用时的入口地址，从而避免分享链接失败的问题。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容