前端Vue项目——课程详情页面实现

一、详情页面路由跳转

　　应用 Vue Router 编程式导航通过 this.$router.push() 来实现路由跳转。

1、绑定查看详情事件

　　修改 src/components/Course/Course.vue 文件，给课程 div 绑定查看详情事件。

<div class="courseList">
    <div class="detail" v-for="(course, index) in courseDetail" :key="course.id" @click="detailHandler(course.id)">
        <div class="head">
            <img :src="course.course_img" alt="" class="backImg">
            <!-- 背景色：行内样式优先显示 -->
            <b class="mask" :style="{background: course.bgColor}"></b>
            <p>{
   { course.name }}</p>
        </div>

　　v-on，缩写 @ ，绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

2、定义详情事件

methods: {
    // 课程详情时间操作
    detailHandler(id) {
        this.$router.push({
            name: "course.detail",
            params: {
                detailId: id,
            }
        })
    },

　　注意：path只能和query搭配使用，name可以和params/query搭配使用，使用params传参只能使用name进行引入。

3、定义新的路由规则

　　在 src/router/index.js 添加如下内容：

import CourseDetail from '@/components/Course/CourseDetail'

// 配置路由规则
export default new Router({
  linkActiveClass: 'is-active',
  mode: 'history',   // 改为history模式
  routes: [
    // 略
    // 课程详情,路由：course/detail/web/3
    {
      path: '/course/detail/web/:detailId',   // 动态匹配
      name: 'course.detail',       // 路由名称
      component: CourseDetail      // 对应组件
    }
  ]
})

　　要把某种模式匹配到的所有路由，全部映射到同个组件。比如这里是课程详情组件，但是各个不同的课程有不同的 id，且都要用这个组件来渲染。那么可以在vue-router的路由路径中使用”动态路径参数“（dynamic segment）来实现这个效果。

　　一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 CourseDetail 的模板，输出当前课程的 ID：

<template>
  <div>
    CourseID:{
    {
    $route.params.detailId}}
  </div>
</template>

<script>
  export default {
    name: "CourseDetail",
    data() {
      return {

      };
    },
  };
</script>

　　页面显示效果如下所示：

　　

二、课程详情页面实现

1、课程详情顶部布局和样式

<template>
  <div class="wrap">
    <div class="web-course-banner">
      <div class="container">
        <div class="title">
          <img src="../../../static/images/play.png" height="67" width="67" alt="">
          <h1 class="course-title">Django框架学习</h1>
        </div>
        <span class="course-text">Python语言下最强大优秀的WEB框架从入门到进阶</span>
        <div class="course-list">
          <ul>
            <li class="detail-item">
              难度：初级
            </li>
            <li class="sep"></li>
            <li class = detail-item>时长：32小时</li>
            <li class="sep"></li>
            <li class = detail-item>学习人数：632人</li>
            <li class="sep"></li>
            <li class = detail-item>评分 10.0</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 代码略 -->
  </div>
</template>

<style lang="css" scoped>
  .wrap{
    
    width: 100%;
  }
  .web-course-banner{
    
    width: 100%;
    height: 512px;
    background: url(../../../static/images/web-banner.1402933.png) no-repeat;
    background-size