一种解决方法是将form Package 在另一个元素（如div）中，并将其用作挂载点：

<script src="https://unpkg.com/vue@3.0.5"></script>

<div id="app">
  <form @submit.prevent="onSubmit">
      <input type="text">
      <input type="text">
      <button type="submit">submit</button>
  </form>
</div>

<script>
Vue.createApp({
  methods: {
    onSubmit() {
      console.log('submit')
    }
  }
}).mount('#app')
</script>

你可以让按钮类型为button，然后只做一个点击事件来做你想做的事情。这应该可以防止它重新加载
比如：

<form id="app">
    <input type="text">
    <input type="text">
    <button type="button" @click="yourFunction">submit</button>
</form>

问题出在您的按钮类型上。如果您愿意，您也可以在按钮上而不是窗体上防止默认值。

<template>
    <form id="app" @submit.prevent="onSubmit">
        <input type="text" />
        <input type="text" />
        <button type="submit">submit</button>
    </form>
</template>

<script>
    export default {
        name: "App",
        data() {
            return {};
        },
        methods: {
            onSubmit(e) {
                console.log(e);
            }
        }
    };
</script>

这可以正常工作。默认设置是这样阻止@submit.prevent="onSubmit"。
在vue3应用程序上测试。

使用@submit.prevent而不使用e.preventDefault() ..vue2和3，两个版本都将自动处理事件传播。
由于这是一个Comman事件，调用vue会为我们处理这个问题，而且还因为methods()假设用于数据逻辑而不是DOM操作
参考-链接

以下是使用Vue 3和Composition API的解决方案。请注意，此示例使用<script setup>和node。

<script setup>
import {ref} from 'vue';

const formName = ref('');
const formEmail = ref('');
const formMessage = ref('');

function submitForm(){
    console.log(formName.value);
    console.log(formEmail.value);
    console.log(formMessage.value);
}
</script>

<template>
  <form @submit.prevent="submitForm">
     <input v-model="formName" type="text" >
     <input v-model="formEmail" type="text">
     <textarea v-model="formMessage" cols="30" rows="10"></textarea>
     <button type="submit">Submit</button>
  </form>
</template>