portal/src/views/management/Home/index.vue

<template>
    <el-container class="admin-home">
        <el-aside width="auto">
            <Asider :isCollapse="asideStatus"></Asider>
        </el-aside>
        <el-container>
            <el-header>
                <Header
                        :asideStatus="asideStatus"
                        @asider-status="asiderStatusChange"
                ></Header>
            </el-header>
            <el-main>
                <el-scrollbar style="height: 100%">
                    <router-view></router-view>
                </el-scrollbar>
            </el-main>
            <el-footer>
                <Footer></Footer>
            </el-footer>
        </el-container>
    </el-container>
</template>

<script>
    import Asider       from './components/Asider';
    import Footer       from './components/Footer';
    import Header       from './components/Header';
    import { getCache } from '@/utils/admin/tools';
    import { USER_AUTH } from '@/utils/admin/ConstantConfig';

    export default {
        name:       'Home',
        components: {
            Footer,
            Asider,
            Header,
        },
        data() {
            return {
                asideStatus: false,
            };
        },
        beforeRouteEnter(to, from, next) {
            const data = getCache(USER_AUTH);
            // 未查询到用户权限 回归登录
            if (!data) {
                next({ name: 'Login' });
                return;
            }
            next();
        },
        methods:    {
            asiderStatusChange() {
                this.asideStatus = !this.asideStatus;
            },
        },
    };
</script>

<style lang="scss" scoped>
    .admin-home {
        flex: 1;
        height: 100vh;

        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
            height: 60px;
            overflow: hidden;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            /*padding: 30px 0 30px 30px;*/
            padding: 0;
            ::v-deep .el-scrollbar__wrap {
                overflow-x: hidden;
            }
        }
    }
</style>