一、新增

第一步：添加路由,UI定向到views/edu/teacher/save页面

{
    path: 'save',
    name: '讲师添加',
    component: () => import('@/views/edu/teacher/save'),
    meta: { title: '讲师添加', icon: 'tree' }
}

第二步：在views目录下创建文件夹edu/teacher/并创建save.vue页面。

<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="讲师名称">
        <el-input v-model="teacher.name"/>
      </el-form-item>
      <el-form-item label="讲师排序">
        <el-input-number v-model="teacher.sort" controls-position="right" min="0"/>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level" clearable placeholder="请选择">
          <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
          <el-option :value="1" label="高级讲师"/>
          <el-option :value="2" label="首席讲师"/>
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="teacher.career"/>
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input v-model="teacher.intro" :rows="10" type="textarea"/>
      </el-form-item>
      <!-- 讲师头像：TODO -->
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

第三步：定义api，调用后端接口。

src/api/edu/teacher.js

    addTeacher(eduTeacher){
        return request({
            url: `/eduservice/teacher/addteacher`,
            method: 'post',
            //data表示把对象转换成json进行传递到接口里面,后端使用RequestBody获取数据
            data: eduTeacher
          })
    }

引入teacher api模块

import teacher from '@/api/edu/teacher'

// 保存
saveData() {
      teacher.save(this.teacher).then(response => {
        return this.$message({
          type: 'success',
          message: '保存成功!'
        })
      }).then(resposne => {
        this.$router.push({ path: '/edu/teacher' })
      }).catch((response) => {
        // console.log(response)
        this.$message({
          type: 'error',
          message: '保存失败'
        })
      })
    }

二、路由跳转到其他页面

this.$router.push({ path: '/edu/teacher' })：跳转到/edu/teacher页面。

三、修改

3.1 每条记录后面添加"修改"按钮

<el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <router-link :to="'/edu/teacher/edit/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

<router-link :to="'/edu/teacher/edit/'+scope.row.id">表示路由跳转到指定的地址

3.2 通过路由跳转进入数据回显页面，在路由index页面添加路由

{
        path: 'edit/:id',  //:id相当于占位符
        name: '讲师修改',
        component: () => import('@/views/edu/teacher/save'),
        meta: { title: '讲师修改', icon: 'tree' },
        hidden:true
      },

3.3 点击修改按钮，进入表单页面，进行数据回显

(1) teacher.js

getTeacherInfo(id){
    return request({
        url: `/eduservice/teacher/getTeacherById/${id}`,
        method: 'get',
      })
},

(2) save.vue 

getTeacherInfo(id){
    teacher.getTeacherInfo(id)
        .then(response=>{
            this.eduTeacher = response.data.teacher
    })
}

(3)调用 根据id查询方法

因为添加和修改使用save页面，添加还是修改的区别是：只有修改的时候查询数据回显。

判断路径中是否包含讲师的id值，如果有id值则是修改，没有id值则是添加。

created(){ //页面渲染之前执行
    //判断路径是否有id值
    if(this.$route.params && this.$route.params.id){
        //从路径中获取id值
        const id = this.$route.params.id
        //调用根据id查询方法
        this.getTeacherInfo(id)
    }    
},

四、存在的问题

vue-router导航切换 时，如果两个路由都渲染同个组件，组件会重（chong）用,

组件的生命周期钩子（created）不会再被调用, 使得组件的一些数据无法根据 path的改变得到更新

因此：

1、我们可以在watch中监听路由的变化，当路由变化时，重新调用created中的内容

2、在init方法中我们判断路由的变化，如果是修改路由，则从api获取表单数据，

      如果是新增路由，则重新初始化表单数据

在create方法后面添加监听

watch:{  //监听
    $route(to,from){  //路由变化方式，路由发生变化，方法就会执行
        this.init()
    }
},

init(){
    if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        this.getTeacherInfo(id) //根据id查询
    } else {//路径没有id值做添加
         this.eduTeacher = {}
    }
},