新建和编辑共用一个页面，怎么实现 用vue2

在Vue2中，可以通过条件渲染来实现新建和编辑共用一个页面。具体实现如下：

1. 首先确定需要保存的数据结构，例如一个包含title和content的对象article。

2. 在组件中定义一个data对象，用于存储需要编辑的数据。初始值可以设置为空对象。

data() {
  return {
    article: {}
  }
}

3. 在组件的created生命周期钩子中，根据路由参数判断是新建还是编辑操作。如果是编辑操作，向后端API发送请求获取需要编辑的数据，并将返回的数据赋值给data中的article对象。

created() {
  if (this.$route.params.id) {
    axios.get(`/api/articles/${this.$route.params.id}`)
      .then(res => {
        this.article = res.data
      })
  }
}

4. 在组件的模板中，根据data中是否有article对象来判断是新建还是编辑状态。如果article对象为空，则显示新建表单，否则显示编辑表单。这里可以使用v-if指令实现条件渲染。

<template>
  <div>
    <h1>{{ article.id ? '编辑文章' : '新建文章' }}</h1>
    <form>
      <div class="form-group">
        <label for="title">标题</label>
        <input type="text" class="form-control" id="title" v-model="article.title">
      </div>
      <div class="form-group">
        <label for="content">内容</label>
        <textarea class="form-control" id="content" rows="5" v-model="article.content"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">{{ article.id ? '保存' : '创建' }}</button>
    </form>
  </div>
</template>

5. 在提交表单时，根据data中是否有article对象来判断是新建还是编辑操作。如果article对象为空，则向后端API发送创建文章的请求，否则发送更新文章的请求。

methods: {
  submitForm() {
    if (!this.article.id) {
      axios.post('/api/articles', this.article)
        .then(res => {
          // 新建文章成功，跳转到文章列表页面
          this.$router.push('/articles')
        })
    } else {
      axios.put(`/api/articles/${this.article.id}`, this.article)
        .then(res => {
          // 更新文章成功，跳转到文章详情页面
          this.$router.push(`/articles/${this.article.id}`)
        })
    }
  }
}

通过以上步骤，就可以实现新建和编辑共用一个页面的功能了。