【谷粒学院项目开发34】添加课程基本信息（前端）_基本的页面跳转

1.添加课程管理路由

在这里插入图片描述

2.创建与课程相关的vue页面，修改路由

在这里插入图片描述

3.添加隐藏路由，做页面跳转

在这里插入图片描述

4.粗略编写info.vue

在这里插入图片描述

效果：

5.粗略编写chapter.vue

在这里插入图片描述

效果：

6.粗略编写publish.vue

在这里插入图片描述

效果：

7.详细编写info.vue

<template>
    <div class="app-container">
        <h2 style="text-align: center;">发布新课程</h2>
        <el-steps :active="1" process-status="wait" align-center style="marginbottom: 40px;">
            <el-step title="填写课程基本信息"/>
            <el-step title="创建课程大纲"/>
            <el-step title="最终发布"/>
        </el-steps>
        
        <el-form label-width="120px">
            <el-form-item label="课程标题">
                <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视"/>
            </el-form-item>
            <!-- 所属分类 TODO -->
            <!-- 课程讲师 TODO -->
            <el-form-item label="总课时">
                <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" />
            </el-form-item>
            <!-- 课程简介 TODO -->
            <el-form-item label="课程简介">
                <el-input v-model="courseInfo.description" placeholder=" "/>
            </el-form-item>
            <!-- 课程封面 TODO -->
            <el-form-item label="课程价格">
                <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder=" "/>
            </el-form-item>
            <el-form-item>
                <el-button :disabled="saveBtnDisabled" type="primary" @click="next">保存并下一步</el-button>
            </el-form-item>
        </el-form>


    </div>
</template>
<script>
export default {
    
    
    data(){
    
    
        return{
    
    
            saveBtnDisabled:false,
            courseInfo:{
    
    
                title: '',
                subjectId: '',
                teacherId: '',
                lessonNum: 0,
                description: '',
                cover: '',
                price: 0
            }
        }
    },
    created(){
    
    

    },
    methods:{
    
    
        next(){
    
    
            //跳转到第二步
            this.$router.push({
    
    path:'/course/chapter/1'})
        }
    }
}
</script>