vue 空白页的问题

Question

用vue做了一个h5商城应用的 单页的 hash模式 遇到了一个问题 用户买完商品调起微信支付成功之后 会给用户发个短信，短信里有个链接点击可以跳转到商城一个页面 但是现在点击链接跳转之后空白页面 需要刷新一下
这个不是history才有这种问题吗 测试环境没有问题 生产环境就有问题了
<template>

<div class="order-result">
    <div v-if="ready">
        <!-- <div class="result-info">
            <img src="/images/[e-mail]" alt="">
            订单支付成功！
        </div>
        <img v-if="activityId === 21" class="img-1" src="/images/[e-mail]" alt="">
        <img v-else class="img-1" src="/images/[e-mail]" alt="">
        <div class="wechat">
            <img class="img-2" src="/images/[e-mail]" alt="">
            <div class="btn" v-Clipboard="'baixiongxinpin01'">点击复制微信号</div>
        </div> -->
         <div class="title">
            <img src="/images/[e-mail]" alt="">
            订单支付成功！
        </div>
        <div class="content">
            <img v-if="activityId == 21" class="award-img" src="/images/[e-mail]" alt="">
            <img v-else class="award-img" src="/images/[e-mail]" alt="">
            <img class="qrcode-img" src="/images/qrcode.jpg" alt="">
        </div>
    </div>
   
</div>

</template>
<script>
import Clipboard from '@/utils/clipboard';
import httpUtils from '@/utils/httpUtils'
import { Dialog } from 'vant';
// 21季卡
export default {

directives: {
    Clipboard,
    orderAmount: '',
},
data() {
    return {
        ready: false,
        activityId: '',
    }
},
created() {
    if (!this.$route.query.activity_id) {
        Dialog.confirm({
            message: '是否支付完成'
        }).then(() => {
            this.getOrderInfo()
        }).catch(() => {
            this.getOrderInfo()
        });
    } else {
        this.activityId = this.$route.query.activity_id,
        this.ready = true
    }
},
mounted() {

    
   
},
methods: {
//     getQrCode(){
//       var canvas = document.getElementById('canvas')
//       QRCode.toCanvas(canvas, 'https://shop-ad.rekoon.cn/#/', (error) => {
//           if(error) console.log(error)
//           console.log('Qrcode generated')
//       })
//    },
   getOrderInfo() {
        //this.getQrCode()
    httpUtils.GET('api/order/getOrderInfo?orderId=' + this.$route.query.orderId).then(res => {
        // return console.log(res.data.data)
        // alert(`orderID ${this.$route.query.orderId} status ${res.data.data.status}`)
        this.ready = true
        this.activityId = res.data.data.orderInfo.activity_id
        if (res.data.data.status == 1) {
            this.$router.push('/goodsOrder?goodsId=' + res.data.data.detailInfo[1].goods_sku_id)
        } 
    })
   }
},
components: {

}

}
</script>
<style lang="less" scope>

.order-result {
     background-color: #ffffff;
     .title {
         width: 6.9rem;
         height: 1.07rem;
         line-height: 1.07rem;
         color: #444444;
         font-size: .36rem;
         text-align: center;
         margin: 0 auto;
         background:rgba(57,201,122,0.05);
         border-radius: .08rem;
         img {
            width: .43rem;
            height: .43rem;
            vertical-align: middle;
         }
     }
     .content {
         .award-img {
             display: block;
             width: 7.49rem;
             height: 7rem;
             margin: .39rem auto 0 auto;
         }
         .qrcode-img {
             display: block;
             width: 2.17rem;
             height: 2.27rem;
             margin: 0 auto;
         }
     }
    //  padding: 0 .2rem;
    //  .result-info {
    //      color: #444444;
    //      font-size: .36rem;
    //      height: 1.07rem;
    //      line-height: 1.07rem;
    //      background: #fff;
    //      text-align: center;
    //      img {
    //          width: .43rem;
    //          height: .43rem;
    //          vertical-align: middle;
    //      }
    //  }
    //  .img-1,.img-2 {
    //      width: 6.8rem;
    //      height: 5.1rem;
    //      display: block;
    //      margin: 0 auto;
    //  }
    //  .img-2 {
    //      height: 3.62rem;
    //  }
    //  .wechat {
    //      position: relative;
    //      .btn {
    //          position: absolute;
    //          left: 50%;
    //          bottom: -0.08rem;
    //          width: 3.96rem;
    //          height: .89rem;
    //          line-height: .89rem;
    //          color: #fff;
    //          text-align: center;
    //          font-size: .34rem;
    //          margin-left: -1.98rem;
    //          background:linear-gradient(133deg,rgba(227,100,93,1) 0%,rgba(227,79,72,1) 100%) rgba(172,44,43,1);
    //          box-shadow:0px 2px 3px 0px rgba(216,90,82,0.3);
    //          border-radius:100px
    //      }
    //  }
}

</style>

Answer 1

请贴出相关代码