vue中添加和编辑显示控制 (带接口,编辑中带id)

1)首先定义一个变量    showMode: true, //true表示添加文章  false表示显示文章   [在vue中一般定义在data中]  [AddOrEditAritcal.vue]

2)然后在页面上应用     <h1>{{ showMode ? "添加文章" : "编辑文章" }}</h1>        [在vue中template中]    [AddOrEditAritcal.vue]

 3)在编辑中携带id                  [Artical.vue]

handleEdit(index, item) {

      this.$router.push({

        name: "changeartical",

        query: { articalId: item.articalId }, //每一项的articalId 

      });

    },

4)在带id的页面中  判断id是存在 ,如果是则显示编辑   [AddOrEditAritcal.vue]

created() {

    // console.log(this.$route.query.articalId);

    if (this.$route.query.articalId) {

      //如果携带id则为编辑

      this.showMode = false;

     // this.showArtical(this.$route.query.articalId); //显示编辑文章

    }

1)2)3)4)为控制页面是编辑还是显示

二、扩展:在methods中

 (1)、AddOrEditAritcal.vue

showArtical(id) {

      //查询, 如果是编辑,让该条数据回显在页面上

    getOneArtical(id).then((res) => {  //此为接口不写

        if (res.code == 200) {

          // console.log(res);

          this.articalObj = res.data;

          // this.editor.txt.html = res.data.content;

        }

      });

    },

（2）、AddOrEditAritcal.vue

 sendArtical() {

      if (this.showMode) {

        //如果是添加文章

        addArtical(this.articalObj).then((res) => {    //此处为接口中的数据，不予以考虑

          if (res.code == 200) {

            this.$router.push({ name: "artical" });

            showOkMes(res.msg);

          } else {

            showErrorMes(res.msg);

          }

        });

      } else {

        // console.log("编辑文章");

        editArtical(this.articalObj).then((res) => {

          if (res.code == 200) {

            showOkMes(res.msg);

            this.$router.push({ name: "artical" });

          } else {

            showErrorMes(res.msg);

          }

        });

      }

    },

}