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);
}
});
}
},
}