可以使用路由参数来实现在同一个页面中进行新增和修改操作，并且能够读取和提交数据。 首先，在路由配置中定义一个动态路由参数，例如： ``` { path: '/edit/:id', name: 'edit', component: EditPage } ``` 其中，`:id` 表示动态路由参数，用于传递要编辑的数据的唯一标识。 然后，在组件中，可以通过 `$route.params.id` 来获取路由参数中的 `id` 值，进而根据该值从后端获取要编辑的数据。 在提交修改时，可以根据 `id` 值向后端发送修改请求，完成数据的更新。 完整的示例代码如下： ``` <template> <div> <h1>{{ title }}</h1> <form @submit.prevent="submitForm"> <label> Name: <input type="text" v-model="name"> </label> <label> Age: <input type="number" v-model="age"> </label> <button type="submit">{{ submitButtonText }}</button> </form> </div> </template> <script> export default { data() { return { id: null, name: '', age: '', title: '', submitButtonText: '' } }, created() { this.id = this.$route.params.id if (this.id) { // 根据 id 从后端获取要编辑的数据 // 然后将数据填充到表单中 this.title = 'Edit User' this.submitButtonText = 'Update' } else { this.title = 'Add User' this.submitButtonText = 'Create' } }, methods: { submitForm() { if (this.id) { // 根据 id 向后端发送修改请求 // 更新数据 } else { // 向后端发送新增请求 // 创建数据 } } } } </script> ```