[TOC]

创建并设置 edit.vue，并给 create-or-edit.vue 绑定 is-edit 属性标记为编辑功能。

配置路由，并设置按钮点击跳转。

路由配置通过 props 解耦

组件通过 props 接收动态路由参数

点击编辑按钮跳转，同时通过作⽤域插槽接收并设置参数

// router/index.js … { path: ‘/course/:courseId/edit’, name: ‘course-edit’, component: () => import(/ webpackChunkName: ‘course-edit’ / ‘@/views/course/edit.vue’), props: true } ] // course/edit.vue … props: { courseId: { type: [String, Number], required: true } }, … // course/list.vue … … 测试编辑按钮操作是否可以正确跳转，成功。

将路由参数 courseId 传递给⼦组件

// edit.vue … is-edit :courseId=“courseId” > …

create-or-edit 组件接收⽗组件传值并进⾏处理。

courseId ⽆需设置默认值，因为添加时没有 id

// create-or-edit.vue … props: { isEdit: { type: Boolean, default: false }, courseId: { type: [String, Number] } }, …

在 created 中根据 id 请求被编辑项的数据。

// create-or-edit.vue … created () { if (this.isEdit) { // 编辑时，加载课程内容 this.loadCourse() } }, methods: { loadCourse () { }, … } …

封装通过课程Id获取课程信息的接⼝功能，地址。

// services/course.js .. // 通过课程Id获取课程信息 export const getCourseById = courseId => { return request({ method: ‘GET’, url: ‘/boss/course/getCourseById’, params: { courseId } }) }

引⼊使⽤

// create-or-edit.vue … import { saveOrUpdateCourse, getCourseById } from ‘@/services/cou rse’ … async loadCourse () { const { data } = await getCourseById(this.courseId) if (data.code === ‘000000’) { // 将要编辑的分类数据保存到 course 中 this.course = data.data } },