#14vue3生成表单并跳转到外部地址的方式

 

 

1、背景

后端返回的json数据中包含一个json数组，此数组中是目标跳转地址所需要的form表单的数据。

2、跳转前的页面

const goto = () => {
	finish.value = true;
  request.post('/xxx/yyy',
      {zzz: zzz.value}).then(res => {
    const url = res.data.submitUrl
    const params = JSON.stringify(res.data.params);
    const resolve = router.resolve({name:'outForm',query:{url,params}});
    window.open(resolve.href, "_blank");
  })
}

params在后端是一个Map<String,Object>，传递到前端后先将其序列化为字符串。

使用router.resolve通过query上送的方式把参数传递到outForm.vue。

3、outForm.vue

<template>
<form ref="formRef" method="post">
    <input v-for="(value, key) in params" :key="key" type="hidden" :name="key" :value="value" />
  </form>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {toReactive