course_resource/src/views/iframeRoute.vue

<template>
    <el-page-header>
        <template #breadcrumb>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">
                    首页
                </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: `/details/${params.title}` }">{{ params.title }}</el-breadcrumb-item>
                <el-breadcrumb-item>{{ params.id }}</el-breadcrumb-item>
            </el-breadcrumb>
        </template>
        <div class="iframDiv">
            <iframe :src="iframeSrc" frameborder="0"></iframe>
        </div>
    </el-page-header>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';  //1.先在需要跳转的页面引入useRouter
import main from './main.vue';
const { query, params } = useRoute()

const iframeList = [
    {
        label: "情绪识别",
        src: "//ai-demos.cocorobo.cn/labs/emotion-recognition/"
    },{
        label: "物体识别",
        src: "//ai-demos.cocorobo.cn/object-detection/index.html"
    },{
        label: "语音识别",
        src: "//ai-demos.cocorobo.cn/labs/speech-recognition/"
    },{
        label: "图形化",
        src: "//pi.cocorobo.cn/?lang=zh-hans"
    },{
        label: "Python",
        src: "//pi.cocorobo.cn/python/?lang=zh-hans"
    },{
        label: "课程管理",
        src: "//ai-demos.cocorobo.cn/labs/emotion-recognition/"
    },{
        label: "课程中心",
        src: "//ai-demos.cocorobo.cn/labs/emotion-recognition/"
    },{
        label: "学生评价",
        src: "//ai-demos.cocorobo.cn/labs/emotion-recognition/"
    },
]
const iframeSrc = ref('')
onMounted(()=>{
    iframeSrc.value = iframeList.find(x=>x.label == params.id).src
})
</script>

<style lang="scss">
.el-page-header {
    padding: 20px 10%;
    background: #F0F2F5;
    height: calc(100% - 60px);

    .el-page-header__header {
        display: none;
    }

    .el-page-header__main {
        width: 100%;
        height: calc(100% - 30px);

        .iframDiv {
            width: 100%;
            height: 100%;

            iframe {
                width: 100%;
                height: 100%;
            }
        }

    }
}
</style>