今天完成的事情：
完成了编辑页赋值，学习了路由传参
完成了富文本插件的使用
online() {
//保存上线
let price = {
title: this.title,
type: this.type,
status: 2,
img: this.img,
content: this.editorContent,
url: this.url,
};
axios.post("api/a/u/article", qs.stringify(price)).then((res) => {
console.log(res.data);
if (res.data.code == 0) {
this.$router.push("/article");
this.$notify({
title: "上线成功",
type: "success",
position: "bottom-right",
});
} else {
this.$notify.error({
title: "请输入完整信息",
position: "bottom-right",
});
}
});
},
//富文本编辑器
mounted() {
this.editor = new E("#editorElem");
this.editor.customConfig.onchange = (html) => {
this.editorContent = html;
};
this.editor.create();
if (this.$route.query.name === "edit") {
// console.log(this.$route.query.one);
axios.get(`api/a/article/` + this.$route.query.one).then((res) => {
console.log(res.data.data.article);
let resone = res.data.data.article;
this.type = this.types[resone.type]; //类型
this.title = resone.title; //标题
this.url = resone.url; //链接
// 数据赋值
this.editor.txt.html(resone.content);
this.img = resone.img; //图片
this.startday = resone.createAt; //创建时间
this.status = resone.status; //状态
});
}
关于路由传参的三种基本方式：
第一种方法 页面刷新数据不会丢失
通过配置路由参数传递
methods：{
insurance(id) {
//直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/particulars/${id}`,
})
}
需要对应路由配置如下：
{
path: '/particulars/:id',
name: 'particulars',
component: particulars
}
第二种方法 页面刷新数据会丢失
通过路由属性中的name来确定匹配的路由，通过params来传递参数。
methods：{
insurance(id) {
this.$router.push({
name: 'particulars',
params: {
id: id
}
})
}
第三种方法
使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
methods：{
insurance(id) {
this.$router.push({
path: '/particulars',
query: {
id: id
}
})
}
明天计划的事情：
继续完成任务
遇到的问题：
没有问题
返回列表
评论