vue 默认布局 顶部栏 左侧栏 右侧内容区域

 

<!-- 默认布局 -->
<template>
    <div class="layout-default">
        <auth></auth>
        <base-header></base-header>
        <div class="main-wrapper">
            <div class="left-wrapper">
                <left-menu></left-menu>
            </div>
            <div class="content-wrapper">
                <transition name="fade-transform"
                            mode="out-in">
                    <router-view />
                </transition>
            </div>
        </div>
    </div>
</template>
<script>

import Auth from '../common/Auth';
import BaseHeader from '../BaseHeader';
import LeftMenu from '../LeftMenu';

export default {
    name: 'DefaultLayout',
    components: {
        Auth,
        BaseHeader,
        LeftMenu
    }
};
</script>
<style lang="less"
       scoped>
.layout-default {
    overflow-x: hidden;
    position: relative;
    width: 100%;
    height: 100%;

    .header {
        height: 60px;
        background: rgba(11, 26, 56, 1);
    }

    .main-wrapper {
        overflow-x: hidden;
        width: 100%;
        height: calc(100% - 60px);
    }

    .left-wrapper {
        float: left;
        box-sizing: border-box;
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        width: 220px;
        height: 100%;
        background: rgba(255, 255, 255, 1);
    }

    .content-wrapper {
        overflow-x: hidden;
        margin-left: 220px;
        height: 100%;
    }
}

.fade-transform-leave-active, .fade-transform-enter-active {
    transition: all 0.5s;
}

.fade-transform-enter {
    opacity: 0;
    transform: translateX(-30px);
}

.fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
</style>

<!--头部-->
<template>
    <div class="base-header">
        名称
    </div>
</template>

<script>
export default {
    name: 'BaseHeader'
    // components: {},
    // directives: {},
    // filters: {},
    // model: {},
    // props: [],
    // data() {},
    // computed: {},
    // watch: {},
    // mounted() {},
    // created() {},
    // activated() {},
    // beforeDestroy() {},
    // destroyed() {},
    // methods: {},
};
</script>

<style lang="less"
       scoped>
.base-header {
    padding-left: 30px;
    height: 60px;
    font-size: 16px;
    line-height: 60px;
    color: #ffffff;
    background: rgba(11, 26, 56, 1);
}
</style>

 

<!--左侧菜单栏-->
<template>
    <div class="left-menu">
        <div v-for="item in menuList"
             :key="item.routeName"
             class="menu-item"
             @click="handleRoute( item.routeName)">
            {{item.name}}
        </div>
    </div>
</template>

<script>
export default {
    name: 'LeftMenu',
    // components: {},
    // directives: {},
    // filters: {},
    // model: {},
    // props: [],
    // data() {},
    computed: {
        menuList() {
            return [
                {
                    name: '工作',
                    routeName: 'Work'
                },
                {
                    name: '模块',
                    routeName: 'Module'
                },
                {
                    name: '学习',
                    routeName: 'Study'
                }
            ];
        }
    },
    // watch: {},
    // mounted() {},
    // created() {},
    // activated() {},
    // beforeDestroy() {},
    // destroyed() {},
    methods: {
        handleRoute(routeName) {
            this.$router.push({ name: routeName }).catch(() => {
                console.log('不允许重复跳转');
            });
        }
    }
};
</script>

<style lang="less"
       scoped>
.left-menu {
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
    height: 100%;

    .menu-item {
        border-radius: 4px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: rgba(0, 0, 0, 0.85);
        background: rgba(255, 255, 255, 1);
        transition: background-color 0.15s;
        cursor: pointer;

        &:hover {
            color: rgba(34, 91, 246, 1);
            background: rgba(240, 246, 255, 1);
        }
    }
}
</style>

 

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL, // 部署在服务器子路径上时需要
    routes: [
        {
            path: '/',
            name: 'defaultLayout',// 布局组件
            component: () => import('./components/layout/Default.vue'),
            redirect: { name: 'Workbench' },
            children: [
                {
                    path: '/work',
                    name: 'Work',
                    component: () => import('./views/Work.vue')
                },
                {
                    path: '/module',
                    name: 'Module',
                    component: () => import('./views/Module.vue')
                },
                {
                    path: '/study',
                    name: 'Study',
                    component: () => import('./views/Study.vue')
                }
            ]
        },
        {
            path: '/404',
            name: '404',
            component: () => import('./views/404.vue')
        },
        {
            path: '*',
            name: 'all',
            redirect: '/404'
        }
    ]
});