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

Question

目前我有单独的组件CreateUser.vue和EditUser.vue非常大的形式。

• 路线CreateUserIS/users
• 的路线EditUser是/users/:username。

后端 API 也不同：

• POST 用于创建 ( example.com/users) 和
• PUT 进行编辑 ( example.com//users/:username)。

同样在EditUser,username字段是只读的，因为它一旦创建就无法编辑，否则两者CreateUser和EditUser模板都是相同的，但 Javascript 部分是不同的。

题：

我怎样才能将它组合成一个 Component UserForm.vue并消除CreateUser.vue和EditUser.vue？

在主 UI 中，有一个Create User路由到CreateUser组件的按钮。在用户列表视图中，每一行都有一个Edit路由到EditUser组件的按钮。

我正在使用 Vue 路由器来定义类似于下面的路由：

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

Answer 1

您可以通过props路由器配置中的属性将参数传递到您的组件中，然后像上面的回答一样使用它to render the necessary inputs...

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