vue 带参数跳转到新页面

项目需求：打开新的页面进行支付

解决方案：

首先需要配置路由：

const route = [
  {
    path: '/hotel/payment',
    component: () => import('@/views/payment/HotelPayment.vue'),
    name: 'hotelPayment',
    meta: { title: '酒店订单支付' }
  }
]

给需要跳转的按钮绑定事件：

<el-button @click="handlePayment(item)">点击支付</el-button>

/* 点击支付 */
  handlePayment(row) {
    //请求后台数据
    queryHtOrderDetail({ orderNo: row.OrderNo }).then(res => {
      let { code, data } = res.data
      if (code == 0) {
        let time = new Date(data.AddTime)
        time.setSeconds(time.getSeconds() + 300);
        let payInfo = {paymentDeadline: time, ...data}
        const routeData = this.$router.resolve({
          path: '/hotel/payment', // 目标路由的名称
          query: payInfo,//携带的参数
        });
        window.open(routeData.href, '_blank')//跳转并携带参数
      }
    })
  },

支付页面接收参数：

created() {
  this.orderData = this.$route.query
}

注意：如果传递的参数包含数组或对象则需要使用JSON进行转换:

//传递传参
let payInfo = {
  Deadline: time,
  Passenger: JSON.stringify(data.Passenger),
  Voyage: JSON.stringify(data.Voyage[0]),
}
const routeData = this.$router.resolve({
  path: '/flight/payment', // 目标路由的名称
  query: payInfo,
});
window.open(routeData.href, '_blank')

//接收参数
this.orderInfo = {
  ...this.$route.query,
  Passenger: JSON.parse(this.$route.query.Passenger),
  Voyage: JSON.parse(this.$route.query.Voyage)
}

学艺不精，但希望有所帮助。