如何获取Vue表单中的所有数据并传到另一个页面

一种常用的方法是通过路由传参将表单数据传递到另一个页面。具体步骤如下：

1. 在第一个页面中，定义一个data属性，用来存储表单数据。例如：

data() {
  return {
    formData: {
      name: '',
      age: '',
      email: ''
    }
  }
}

2. 在表单中使用v-model指令将表单数据绑定到formData中。例如：

<input v-model="formData.name" type="text" placeholder="姓名">
<input v-model="formData.age" type="number" placeholder="年龄">
<input v-model="formData.email" type="email" placeholder="邮箱">

3. 定义一个方法，用来处理表单提交事件。例如：

methods: {
  handleSubmit() {
    // 处理表单提交逻辑
    // 通过路由传参将formData传到另一个页面
    this.$router.push({
      name: 'otherPage',
      query: {
        formData: JSON.stringify(this.formData)
      }
    })
  }
}

4. 在路由配置中，定义另一个页面，并在该页面中获取路由参数中的formData。例如：

{
  path: '/otherPage',
  name: 'otherPage',
  component: OtherPage,
  props: (route) => ({
    formData: JSON.parse(route.query.formData)
  })
}

5. 在另一个页面中，通过props属性接收formData。例如：

props: {
  formData: {
    type: Object,
    default: () => ({})
  }
}

6. 在另一个页面中，即可通过formData获取到第一个页面中的表单数据。例如：

<div>{{ formData.name }}</div>
<div>{{ formData.age }}</div>
<div>{{ formData.email }}</div>