vue项目---编辑与新增页

vue项目

在项目中，有很多管理系统类的项目，各有所不同！ 

在关于某个列表选择时，常常会有新增列表页面和编辑某一项页面，甚会有只可读的详情页！（实际上布局相差不大）

对于编辑和新增页：

<template>
  <div>
    <h1>{{ editId ? 编辑 : 新增 }}</h1>
    <div><button @click="save">保存</button><button @click="cancel">取消</button></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      editId: null
    };
  },
  methods: {
    reset() {},
    save() {
      // 验证数据是否已填，保存数据
      const params = form;
      if (this.editId) {
        //   存在id，为编辑请求
        getUpdate(params).then(res => {
          console.log(res);
        });
      } else {
        //   不存在id，为新增请求接口
        getCreate(params).then(res => {
          console.log(res);
        });
      }
      //   重置
      this.reset();
    },
    cancel() {
      this.$router.back(-1);
    }
  },
  mounted() {
    this.reset();
    // 根据传入的id，渲染编辑页数据
    if (this.$router.currentRoute.query.id) {
      this.editId = parseInt(this.$router.currentRoute.query.id);
      if (!Number.isNaN(this.editId)) {
        getId({ id: this.editId }).then(res => {
          console.log(res);
        });
      }
    }
  }
};
</script>