路由和有名分组传参

演示效果

思路

1 首先在router-link里要在路径上携带参数触发路由

2 在router.js 里面配置好接收有名分组的路由

3 在课程详情页面拿到参数（id的值）从而拿到正确的数据

代码

1 首先在router-link里要在路径上携带参数触发路由

CourseCard.vue (小组件)

<template>
        <div class="course-card">
            <div class="left" :style="{background:cardcon.bgColor}">
            </div>
            
            <router-link :to="`/course/detail/${cardcon.id}`" class="right">{{cardcon.title}}</router-link>

        </div>

2 在router.js 里面配置好接收有名分组的路由

router.js

    {
      path:'/course/detail/:pk',
      name:'course-detail',
      component:CourseDetail
    },

3 在课程详情页面拿到参数（id的值）从而拿到正确的数据

<script>
    export default {
        name: "CourseDetail",
        // ---模拟后台数据开始---。
        data(){
            return{
                course_ctx:''
            }
        },
        created(){
            let detail_List = [
                {
                id:1,
                bgColor: 'red',
                title: 'python基础',
                ctx :'python基础as两地分居拉速度快机房拉速度快放假'
            },
            {
                id:2,
                bgColor: 'yellow',
                title: 'django入土',
                ctx :'django入土as两地分居拉速度快机房拉速度快放假'
            },
            {
                id:3,
                bgColor: 'green',
                title: 'mysql衫裤',
                ctx :'mysql衫裤as两地分居拉速度快机房拉速度快放假'
            }
            ];
            // let id =2;
            console.log(this.$router);// 大而全的路由信息
            console.log(this.$route); // 当前页面相关的路由信息
            console.log(this.$route.params); // 取到path里的路径
            console.log(this.$route.params.pk);// 取到具体的值
            let id = this.$route.params.pk;// 进行赋值
            for (let dic of detail_List){
                if (dic.id == id){
                    this.course_ctx = dic;
                    break;
                }
            }
            console.log(this.course_ctx)
        // -----模拟后台数据结束------ 。

        }

    }
</script>