<template>
    <Header></Header>
    <el-page-header>
        <template #breadcrumb>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">
                    首页
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{ params.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </template>
        <div class="iframDiv">
            <CourseSelect v-if="detailsTitle == '课程列表'"></CourseSelect>
            <resource v-else-if="detailsTitle == '资源中心'"></resource>
            <Practice v-else-if="detailsTitle == '实践中心'"></Practice>
            <other v-else-if="detailsTitle == '其他课程资源'"></other>
        </div>
    </el-page-header>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import CourseSelect from '@/components/main/courseSelect.vue'
import resource from '@/components/main/resource.vue';
import Practice from '@/components/main/Practice.vue';
import other from '@/components/main/other.vue';
import Header from './header.vue';
import { useRoute } from 'vue-router';  //1.先在需要跳转的页面引入useRouter
const { query, params } = useRoute()
console.log(query, params)

const detailsTitle = ref('')
onMounted(()=>{
    detailsTitle.value = params.title
})
</script>

<style scoped lang="scss"></style>