vue-router小米浏览器iOS微信浏览器加参数不能正常跳转的解决方法

• 2020 年 3 月 31 日
• 筆記

今天在项目中遇到一个问题，测试时发现使用 vue-router 的 this.$router.push 给 URL 添加参数，不能正常跳转。

浏览器测试可以正常跳转，使用 iOS 的微信浏览器访问时，不能正常跳转。

这是一个获取验证码的功能，获取成功后消息提示，然后会给当前链接添加一个邀请码的参数。

let path = this.$route.path;  this.$message.success('邀请链接已生成，请复制分享给好友', 5);  this.$router.push({path, query: {invitationcode: this.inviteCode}});

iOS 微信浏览器实际测试时发现不能跳转，于是我判断了一下 iOS ，如果是弹窗提示，然后用原生 js 进行跳转。

如果不是 iOS 直接使用 vue-router 进行跳转。

let path = this.$route.path;  const isIOS = !!navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端  if (isIOS) {    alert('您的专属链接已生成，点击确定跳转')    window.location = path + '?invitationcode=' + this.inviteCode;  } else {    this.$message.success('邀请链接已生成，请复制分享给好友', 5);    this.$router.push({path, query: {invitationcode: this.inviteCode}});  }

但是之后发现小米浏览器也不能直接跳转，干脆直接用原生 js 跳转了。

let path = this.$route.path;  alert('您的专属链接已生成，点击确定跳转')  window.location = path + '?invitationcode=' + this.inviteCode;

本文已加入 腾讯云自媒体分享计划 (点击加入)