vue项目中后端返回的支付宝form表单,怎么实现支付跳转?

完成该操作,首先心里得有个思路,什么时候跳转,如何实现跳转?

首先明确业务逻辑:支付跳转之前必然有一个提交订单信息【post】的过程,而我们的整个支付表单Form是【post】之后返回的结果。返回的字符串结果如下图:

到这一步,很多人第一反应是不是把这段字符串用v-html转换成标签或者使用innerHTML的方式解决呢?答案当然是否定的。

首先,带有js脚本,v-html根本无法内嵌。这个是今天我在企业写业务遇到的问题。我开始的想法是切割字符串为数组,【见红色框框】,这样就可以将dom结构和js脚本区分开来,在对其进行操作,十分麻烦,一定不要去切割。只需要一行代码就能搞定,【见绿色框框】!没有对比就没有伤害.......

 总结:说了这么多就直接来张导图梳理一下吧!

成功跳转的截图如下:

 

 但是这种是跳转到后端传回的页面,有没有铁铁和大神知道是否能将传过来的页面作为子组件内嵌到页面中,欢迎留言告知或私信哦,期待你的批评很指正!!!

  • 6
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
实现Ant Design Vue的Table表格点击跳转到相应的Form表单,可以按照以下步骤进行操作: 1. 在Table表格,可以使用scoped slots来自定义列的渲染方式。例如,为某一列添加一个可点击的链接: ```html <a href="#" @click="handleClick(record)">查看详情</a> ``` 这里的`handleClick`方法是在Vue实例定义的,用于处理点击事件并跳转到相应的Form表单。 2. 在Vue实例,定义`handleClick`方法。该方法可以接收一个参数,即当前所点击的行的数据对象`record`。例如: ```javascript methods: { handleClick(record) { // 根据record的内容,跳转到相应的Form表单页面 // ... } } ``` 在此方法,可以根据`record`对象的内容,进行相应的页面跳转操作。例如,可以使用Vue Router来实现页面跳转。 3. 在Form表单页面,可以通过props属性接收父组件传递过来的参数,从而根据参数渲染相应的内容。例如: ```html <template> <div> <h2>{{ title }}</h2> <!-- 其他表单内容 --> </div> </template> <script> export default { props: ['title'] // 其他组件代码 } </script> ``` 在这个示例Form表单页面接收一个名为`title`的参数,用于显示表单标题。在父组件,可以通过`router.push`方法传递该参数,例如: ```javascript this.$router.push({ path: '/form', query: { title: '表单标题' } }) ``` 这样,在跳转Form表单页面时,即可将`title`参数传递给该组件,并根据该参数渲染相应的表单标题。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前行之路_vennie

你的鼓励是对我原创的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值