在Vue3中,你可以使用axios或者内置的fetch函数来发送POST请求,并在请求成功后进行页面跳转。

使用axios发送POST请求的代码示例如下:

<template>
  <button @click='postData'>发送POST请求并跳转</button>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    async postData() {
      try {
        const response = await axios.post('请求地址', {
          // 请求体数据
        });

        // 请求成功后进行页面跳转
        window.location.href = response.data.redirectUrl;
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

使用内置的fetch函数发送POST请求的代码示例如下:

<template>
  <button @click='postData'>发送POST请求并跳转</button>
</template>

<script>
export default {
  methods: {
    async postData() {
      try {
        const response = await fetch('请求地址', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            // 请求体数据
          }),
        });

        // 请求成功后进行页面跳转
        const data = await response.json();
        window.location.href = data.redirectUrl;
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

注意替换代码中的请求地址为实际的请求地址,以及根据实际情况修改请求体数据和响应数据的处理逻辑。

Vue3 发送POST请求并跳转页面:Axios 和 Fetch 实践

原文地址: https://www.cveoy.top/t/topic/nGPF 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录