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>