修改功能需要注意到隱藏路由

1、路由部分

{
    path: '/teacher',
    component: Layout,
    redirect: '/teacher/table',
    name: '講師管理',
    meta: { title: '講師管理', icon: 'example' },
    children: [
      {
        path: 'table',
        name: '講師列表',
        component: () => import('@/views/edu/teacher/list'),
        meta: { title: 
 
'講師列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '新增講師',
        component: () => import('@/views/edu/teacher/save'),
        meta: { title: '新增講師', icon: 'tree' }
      },
      {
        path: 'edit/:id',
        name: '修改講師',
        component: () => import('@/views/edu/teacher/save
 
'),
        meta: { title: '新增講師', icon: 'tree' },
      hidden:true
      }
    ]
  },

2、頁面部分

列表頁面

<el-table
      :data="list"
      element-loading-text="資料載入中"
      border
      fit
      highlight-current-row>
      <el-table-column prop="name" label="名稱" width="80" />
      <el-table-column label="
 
操作" width="200" align="center">
        <template slot-scope="scope">
          <router-link :to="'/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>
    </el-table>

修改頁面

<template>
  <div class="app-container">
    <el-form label-width="130px">
      <el-form-item label="講師名稱">
        <el-input v-model="teacher.name"></el-input>
      </el-form-item>
      <el-form-item label="講師排序">
        <el-input-number v-model="teacher.sort" controls-position="left" :min="0" ></el-input-number>
      </el-form-item>
      <el-form-item label="講師頭銜">
        <el-select v-model="teacher.level" placeholder="請選擇講師頭銜" clearable >
          <el-option label="高階講師" :value="1"></el-option>
          <el-option label="首席講師" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="講師資歷">
        <el-input v-model="teacher.career"></el-input>
      </el-form-item>
      <el-form-item label="講師簡介">
        <el-input type="textarea" v-model="teacher.intro" :rows="10"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">儲存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

3、指令碼部分

teacher.js

getTeacherInfo(id){
        return request({
            url:`/eduservice/teacher/getTeacher/${id}`,
            method:'get',
        })
    },
    updateTeacher(teacher){
        return request({
            url:'/eduservice/teacher/updateTeacher',
            method:'post',
            data:teacher
        })
    }

<script>
import teacherApi from '@/api/teacher/teacher.js'

export default{
    data(){
        return{
            teacher:{
                name:'',
                sort:0,
                level:1,
                carrer:'',
                intro:'',
                avatar:''

            },
            saveBtnDisabled:false  //儲存按鈕是否禁用
        }
    },
    created(){
        //根據路由傳參確定是否需要
        if(this.$route.params&&this.$route.params.id){
            const id=this.$route.params.id
            this.getInfo(id)
      }
    },
    methods:{
        saveOrUpdate(){ 
          //根據是否有id這個引數，判斷當前操作是新增還是修改
          if(this.teacher.id){ 
            this.updateData()
          }
          else{
            this.saveData()
          }
        },
        //新增講師方法
        saveData(){
            teacherApi.addTeacher(this.teacher)
            .then(responser=>{
                 this.$message({
                type: 'success',
                message: '新增成功!'
                });
                //回到列表頁面，路由跳轉
                this.$router.push({path:'/teacher/table'}) 
            })
        },
        //獲取講師資料
        getInfo(id){
          teacherApi.getTeacherInfo(id)
          .then(response=>{
            this.teacher=response.data.teacher
          })
        },
        //修改講師方法
        updateData(){
          teacherApi.updateTeacher(this.teacher)
          .then(response=>{
             this.$message({
                type: 'success',
                message: '修改成功!'
                });
                this.$router.push({path:'/teacher/table'})
          })
        }
    }
}
</script>