Vue.js 如何在VueJS 2中为创建和编辑用户使用相同的用户表单组件？_Vue.js_Vuejs2

Vue.js 如何在VueJS 2中为创建和编辑用户使用相同的用户表单组件？

vue.js vuejs2

Vue.js 如何在VueJS 2中为创建和编辑用户使用相同的用户表单组件？,vue.js,vuejs2,Vue.js,Vuejs2,目前，我有单独的组件CreateUser.vue和EditUser.vue，格式非常大 CreateUser的路由是/users EditUser的路由是/users/：username 后端API也不同：发布用于创建（example.com/users）和进行编辑（example.com//users/：username）同样在EditUser中，username字段是只读的，因为一旦创建它就无法编辑，否则CreateUser和EditUser模板是相同的，但Javascript

目前，我有单独的组件

CreateUser.vue

和

EditUser.vue

，格式非常大

```
CreateUser
```
的路由是
```
/users
```
```
EditUser
```
的路由是
```
/users/：username
```

后端API也不同：

发布用于创建（
```
example.com/users
```
）和
进行编辑（
```
example.com//users/：username
```
）

同样在

EditUser

中，

username

字段是只读的，因为一旦创建它就无法编辑，否则

CreateUser

和

EditUser

模板是相同的，但Javascript部分是不同的

问题：

我如何才能将其组合到一个组件中，并消除

CreateUser.vue

和

EditUser.vue

在主UI中有一个按钮

CreateUser

，它将路由到

CreateUser

组件。在用户列表视图中，每行都有一个按钮

Edit

，该按钮路由到

EditUser

组件

我使用Vue路由器定义路由，如下所示：

{
   path: '/users',
   name: 'createUser',
   component: CreateUser
},
{
   path: '/users/:id',
   component: EditUser,
   name: 'editUser'
}

只需在您的UserForm.vue上添加一个属性

道具：{
当前行动：{
类型：字符串，
默认值：“创建”，
必填项：true
},
},

你必须把这个字符串在

在组件中，使用它调用必要的方法createUser（）或updateUser（）。还可以使用它渲染必要的输入和/或计算必要的计算属性

据我所见，此属性必须是主UI上的数据属性。在显示用户窗体之前，您必须更改此属性。

您可以通过路由器配置中的

道具属性进入组件，然后使用它作为上述的答案，以呈现必要的输入…

{
  path: '/users',
  name: 'createUser',
  component: UserForm
  props: {editMode: false}
},
{
  path: '/users/:id',
  name: 'editUser'
  component: UserForm,
  props: {editMode: true}
}

如果用户列表映射到createUser上，如何使用“/users”加载用户列表？