请教一下，请问就是比如页面有个侧边栏 点不同的组件 右边显示出组件相应的页面 是怎么做到的？然后点不同的组件后它们的相应内容又是怎么消失和出线的呢

原生 还是 框架来实现？

Vue框架还是比较好实现的

<template>
    <div class="container">
        
        <div class="left" >
            <div class="leftTitle" @click="click($event)" v-for="(item,index) in leftList" :key="index" :data-index="index">
                {{item}}
            </div>
        </div>
        <div class="right">
            <div class="title">title{{rightList[currentIndex]}}</div>
            <div class="text">Text{{rightList[currentIndex]}}</div>
        </div>
            
    </div>
</template>

<script>
    export default{
        data(){
            return{
                currentIndex:0,
                leftList:[1,2,3,4,5,6,7,8,9],
                rightList:[1,2,3,4,5,6,7,8,9]
            }
        },
        methods:{
            click(e){
                this.currentIndex = e.currentTarget.dataset.index
                console.log(e.currentTarget.dataset.index);
            }
        }
    }
</script>

<style scoped lang="scss">
    .container{
        display: flex;
        flex-direction: row;
        height: 250px;
        
        .left{
            width: 250px;
            height: 100%;
            overflow: scroll;
            border-right: 1px solid;
            .leftTitle{
                padding: 5px;
                margin-bottom: 5px;
                background-color: $uni-text-color-disable;
            }
        }
        .right{
            padding: 10px;
            .title{
                color: $uni-text-color-grey;
                font-size: 24px;
                font-weight: bold;
            }
            .text{
                padding: 5px;
            }
        }
    }
</style>

可以通过F12或者Ctrl+Shift+I快捷键，打开浏览器自带的开发者工具，即可查看网页前端展示的源代码，然后就可以大概了解左右布局。通过源码查询，发现此网站是采用H5进行开发，左侧采用aside控件，右侧采用main控件。Html5增加了许多语义控件，看名字就可以知道大体功能。比Html4需要通过div+css来定义，要更加便于推广。