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;

本文已加入 騰訊雲自媒體分享計劃 (點擊加入)