[JavaScript知识库]Vue项目 课程列表页 跳转 课程详情页 跳转 视频播放页

课程列表页Course.vue - Coursemain.vue 跳转至 课程详情页

 <!-- 课程列表 -->
      <div class="container-body" v-if="courseArr && courseArr.length > 0">
        <div class="newCourseContent">
          <ul class="courseUl">
            <li
              class="courseItem"
              v-for="(item, index) in courseArr"
              :key="index"
            >
              <div class="courseInfo">
                <!-- 跳转至详情页 -->
                <router-link :to="{ path: '/course-info/' + item.id }">
                  <div
                    class="memberlogo"
                    v-if="item.isMember == 1 && item.discountPrice != 0"
                  >
                    <img src="../../assets/image/member/vipLogo.png" alt="" />
                  </div>
                  <div class="courseBg">
                    <img class="courseImg" :src="item.courseCover" alt="" />
                  </div>
                </router-link>
              </div>
            </li>
          </ul>
        </div>
      </div>

路由 router.js

import Vue from 'vue';
import Router from 'vue-router';

import home from '@/views/Home.vue';
import Course from '@/views/course/Course.vue';
import CourseInfo from '@/views/course/CourseInfo.vue';
import CoursePlay from '@/views/course/CoursePlay.vue';
import contact from '@/views/Contact.vue';

Vue.use(Router);

const routes = [
  { path: '/', component: home },
  { path: '/course', component: Course, name: "course" },
  { path: '/course-info/:courseId', component: CourseInfo, name: "course-info" },
  {
    path: '/course-play/:courseId/:chapterId', component: CoursePlay, name: "course-play",
    meta: { requiresAuth: false }
  },
  { path: '/contact', component: contact },
];

export default new Router({
  routes,
  mode: 'history',
});

课程详情页Courseinfo.vue - Courseinfocontainer.vue 跳转至 课程播放页

<template>
  <div class="courseContainer">
    <div class="course">
      <div class="main">
        <div class="video" v-for="(item, index) in courseChapters" :key="index">
          <div class="chapterName">{{ item.chapterName }}</div>
          <div class="chapterDesc">{{ item.description }}</div>
          <ul class="videos">
            <li class="video-item" v-for="(j, k) in item.children" :key="k">
              <div class="video-itemIcon">
                <i class="el-icon-video-camera"></i>
              </div>

              <div class="item-name">
                <span class="shipin">视频：</span>
                <span class="chapterName">{{ j.chapterName }}</span>
                <span class="free" v-if="j.publicType == 2">试看</span>
              </div>
              <!-- 准备跳转 传：课程id,章节id,是否为试看课 -->
              <button
                class="btn-learn"
                @click="goPlay(courseInfoArr.id, j.id, j.publicType)"
              >
                开始学习
              </button>
              <div class="clearfloat"></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import api from "../../common/api/CourseinfoContainer/courseDetail";
export default {
  data() {
    return {
      // ====接收传来的courseId 调获取详情接口时要使用
      courseId: this.$route.params.courseId, //路由传过来的课程ID
      courseInfoArr: {}, //课程信息
      courseChapters: {}, //课程章节信息
    };
  },
  created() {
    this.getCourseInfo();
  },
  methods: {
    //获取课程详情
    async getCourseInfo() {
      let res = await api.getCourseInfo(this.courseId);
      console.log(res);
      this.courseInfoArr = res.data.data;
      this.courseChapters = res.data.data.bizCourseChapters;
      switch (this.courseInfoArr.courseLevel) {
        case 1:
          this.courseInfoArr.courseLevel = "初级";
          break;
        case 2:
          this.courseInfoArr.courseLevel = "中级";
          break;
        case 3:
          this.courseInfoArr.courseLevel = "高级";
          break;
        default:
          this.courseInfoArr.courseLevel = "零基础";
      }
    },
    //开始学习 按钮跳转
    goPlay(courseId, chapterId) {
      this.$router.push({
        path: "/course-play/" + courseId + "/" + chapterId,
      });
    },
  },
};
</script>

课程播放页 CoursePlay.vue - CoursePlayMain.vue?

<template>
  <div class="main">
    <div class="top">
      <span class="goBack el-icon-back" @click="goBack"> </span>
      <span class="name">笑傲江湖 - 第一天</span>
      <span class="collect" >
                <i class="el-icon-star-on"></i>
                收藏
            </span>
    </div>
  </div>
</template>

<script>
export default{
  data(){
    return{}
  },
  methods:{
    goBack(){//返回上一页
      window.history.go(-1)
    }
  }
}
</script>