需求场景
进入同一个组件构建的页面时,若发布,需要清空;若编辑修改,需要将对应数据回显。
路由定义
{
path: 'info',
name: 'CourseInfo',
component: () => import('@/views/course/form'),
meta: { title: '发布课程' }
},
{
path: 'info/:id',
name: 'CourseInfoEdit',
component: () => import('@/views/course/form'),
meta: { title: '编辑课程' },
hidden: true
}
浏览器中Vue信息
编辑
发布
初始化
created() {
// 通过路由获得courseId
if (this.$route.name === 'CourseInfoEdit') {
this.$parent.courseId = this.$route.params.id;
}
// 通过父组件获得courseId
if (this.$parent.courseId) { // 回显CourseInfo
this.fetchCourseInfoById(this.$parent.courseId);
} else {
// 新增状态
this.initSubjectList();
}
this.initTeacherList();
}