grain-Edu-Note part13 通过路由信息判断并初始化

需求场景

进入同一个组件构建的页面时，若发布，需要清空；若编辑修改，需要将对应数据回显。

路由定义

   {
     
     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();
  }