实战踩坑笔记！微信支付回调页面跳转错误问题，巨坑！！！！

vue实战踩坑笔记！微信支付回调页面跳转错误问题，巨坑！！！！

最近在开发新的H5页面时，要求将老项目也一起集成到新项目中，方便进行统一管理，优化代码。在这之中，涉及到了微信支付问题，本以为已经写好的跳转方法 拿过来也就OK了，没想到踩了一个巨坑，找了小半天才找到问题的症结所在

一、问题描述

在以前老项目中，vue是用引入的vue文件方式写的，支付回调能够正常跳转
在新项目中，优化了引入式vue改为vue cli3进行书写，但是同样的跳转方式，微信回跳的页面总会错误，而支付宝的就没有问题，这要怎么解决啊

下面是老项目的回跳地址

https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=xxxxxxxxxxxxxxxxxxxx&package=xxxxxxxxxxxx&redirect_url=http://xxxx.xxxx.xxx.xx:5500/Web/views/pay-page/pay-page.html

新的回跳地址
https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=xxxxxxxxxxxxxxxxx&package=xxxxxxxxxxxx&redirect_url=https://xxxxxx.xxxxxx.com:9311/#/payment-paynow

但是新的支付完成之后跳转的是
https://xxxxxx.xxxxxx.com:9311/#/

也就是说，支付完成，我想跳回支付页，却给我跳到了首页

二、新老项目页面跳转部分代码

新项目：
Pay(data).then((res) => {
        this.orderNumber = res.data.orderNumber
        if (res.status === 1) {
          sessionStorage.setItem('issurepayfg', true)
          sessionStorage.setItem('orderNum', res.data.orderNumber)
          if (that.payType == 2)
            location.href =res.data.payUrl +'&redirect_url=' +window.location.href.split('?')[0]  //微信的跳转
          else {
            location.href = res.data.payUrl //支付宝的跳转
          }
        } else {
          this.$notify.error({
            title: '错误',
            message: res.message,
          })
        }
        this.loading = false
      })

老项目
var rs = await post(opt)
      console.log('rs -> :', rs)

      that.zhezhao = false
      if (rs.Status) {
        sessionStorage.setItem('issurepayfg', true)
        sessionStorage.setItem('orderNum', rs.Data.OrderNum)
        if (rs.Data && rs.Data.favourable == true) {
          if (that.picked == 2)
            location.href = rs.Data.Url + '&redirect_url=' + url
          else {
            location.href = rs.Data.Url
          }
        } else {
          if (rs.Data.favourable != false) {
            that.quhaotext = rs.Message
            that.quhaoerror = true
          } else {
            this.isSurePay = true
          }
        }
      }

很明显，没有什么区别，这是为啥呢

三、解决办法

通过在官网反复看，总算是解决了这个问题，而解决的方式非常非常简单，简单到我看文档时总是把这一条忽略掉

原文：
注意：
1.需对redirect_url进行urlencode处理
2.由于设置redirect_url后,回跳指定页面的操作可能发生在：1,微信支付中间页调起微信收银台后超过5秒 2,用户点击“取消支付“或支付完成后点“完成”按钮。因此无法保证页面回跳时，支付流程已结束，所以商户设置的redirect_url地址不能自动执行查单操作，应让用户去点击按钮触发查单操作。回跳页面展示效果可参考下图

解决办法就是第一条，对回跳地址进行url编码，真的是打死没想到问题出在这里

解决后代码

if (rs.Status) {
        sessionStorage.setItem('issurepayfg', true)
        sessionStorage.setItem('orderNum', rs.Data.OrderNum)
        if (rs.Data && rs.Data.favourable == true) {
          if (that.picked == 2)
            location.href =
              rs.Data.Url + '&redirect_url=' + encodeURIComponent(that.url)
          else {
            location.href = rs.Data.Url
          }
        } else {
          if (rs.Data.favourable != false) {
            that.quhaotext = rs.Message
            that.quhaoerror = true
          } else {
            this.isSurePay = true
          }
        }
      } 

其实就是加了一个encodeURIComponent 进行了url编码而已

四、问题思考

同样的代码，一个跳转成功，一个失败，区别仅仅是url有没有进行编码，解释不通。
观察后是老项目用的html写的地址用的是 /xxxxxx/xxxxx.html
而新项目是用vue router做路由管理，并且用的是hash模式，在编译过程中，可能#被当成了特殊字符处理，导致回跳失败。
个人猜测如果将模式改为history就能够不进行编码回跳（未实际验证，仅猜测）

本次的踩坑就分享到这里了，希望对大家有用。