课程简介转跳课程详情页面

演示效果

思路

1 先写个课程详情页面（小组件）

2 注册路由

3 在课程简介页面设置转跳（小组件）

4 转跳的时候需要用到router-link，需要注意的是router-link 类似a标签是 inlin-block类型，所以并没有宽高，所以需要设置为block才不改变原来div的样式

代码

1 先整个课程详情页面（小组件）

<template>
    <div class="course-detail">
        <h1>课程详情页面</h1>
        <hr>
    </div>
</template>

<script>
    export default {
        name: "CourseDetail"
    }
</script>


<style scoped>
    h1{
        font-size: 50px;
        text-align: center;
    }
</style>

2 注册路由

routes: [
...
{
      path:'/course/detail',
      name:'course-detail',
      component:CourseDetail
      // redirect:'/page-second'
    }
...
]

3 在课程简介页面设置转跳（小组件）

<template>
        <div class="course-card">
            <div class="left" :style="{background:cardcon.bgColor}">

            </div>
<!--            这么做不可取  因为要设置转跳了,后期会学到逻辑跳转现在暂时考虑直接跳转-->
<!--            <div class="right" @click="goto_detail">-->
<!--                {{ cardcon.title}}-->
<!--                {{ cardcon.id}}-->
<!--            </div>-->
            # 重点
            <router-link to="/course/detail" class="right">{{cardcon.title}}</router-link>

        </div>
    
</template>

<script>
    export default {
        name: "coure-card",
        // 接收父组件传过来的数据
        props:['cardcon'],
        # 测试用的methods 不用在意
        methods:{
            goto_detail(){
                console.log(this.cardcon.id)
            }
        }
    }
</script>

<style scoped>
    .course-card{
        margin-bottom: 20px;
        /*overflow: hidden;  or 下面加上display:block*/
    }
    .course-card div{
        float:left;
    }
    /* 把router-link 浮动起来*/
    .course-card a{
        float:left;
    }
    /*上面哪两个也可以利用 .left,.right 浮动起来*/
    .left{
        width:50%;
        height:120px;
        background-color:tan;
    }
    .right{
        width:50%;
        height: 120px;
        background-color: blue;
        # 重点
        display: block;
        cursor: pointer;
    }
    .course-card:after{
        content:'';
        display:block;
        clear: both;
    }



</style>

4 转跳的时候需要用到router-link

需要注意的是router-link 类似a标签是 inlin-block类型，所以并没有宽高，所以需要设置为block才不改变原来div的样式

ps：源自上个代码

<style scoped>
    ...
.course-card a{
        float:left;
    }
    
 .right{
        width:50%;
        height: 120px;
        background-color: blue;
        # 重点
        display: block;
        cursor: pointer;
    }
    ...