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%">
                    <transition
                            name="fade"
                            mode="out-in"
                            appear
                            enter-class="enter"
                            enter-active-class="enterActive"
                            enter-to-class="enterTo"
                            leave-class="leave"
                            leave-active-class="leaveActive"
                            leave-to-class="leaveTo"
                    >
                        <router-view></router-view>
                    </transition>
                </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;
            }
            ::v-deep .el-scrollbar__bar.is-horizontal {
                visibility: hidden;
            }
        }

        .admin-home-transition {
            overflow-x: hidden;
        }

        /**
         * transform
         */
        ::v-deep .enterActive, ::v-deep .leaveActive {
            transition: all .3s ease;
        }

        ::v-deep .enterTo, ::v-deep .leave {
            opacity: 1;
            left: 0;
            transform: translate(0);
        }

        ::v-deep .enter, ::v-deep .leaveTo {
            opacity: 0;
            transform: translate(100px);
        }
    }
</style>