Vue 06 简单布局：header + left + content

06 简单布局：header + left + content

效果图

实现

1. index布局
2. 路由
3. left

1. 首页布局

行划分：header 4

列划分：left 3, content 21

content: <router-view/>，left里面通过router-link跳转，首页通过router-view接受，页面不变换，仅content部分变更

<template>
    <div>
        <el-row :span="4">
            <h2>Index</h2>
        </el-row>
        <el-row :span="20">
            <el-row>
                <el-col span="3">
                    <LeftMenu></LeftMenu>
                </el-col>
                <el-col span="21">
                    <router-view/>
                </el-col>
            </el-row>
        </el-row>
    </div>
</template>

<script>
    import LeftMenu from '@/components/left-menu'

    export default {
        name: "temp-index",
        components: {
            LeftMenu,
        },
    }
</script>

<style scoped>
</style>

2. 路由

url: /index, 首页

children属性

• /system/user, user模块
• /system/role, role模块
• /system/menu, menu模块
• other, other模块

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

import tempIndex from '@/views/temp-index'
import User from '@/views/user/user'
import Role from '@/views/role/role'
import Menu from '@/views/menu/menu'
import Other from '@/views/other/other'
export const constantRouterMap = [
    {
        path: '/index',
        name: 'index',
        component: tempIndex,
        children: [
            {
                path: '/system/user',
                name: 'user',
                component: User,
            },
            {
                path: '/system/role',
                name: 'role',
                component: Role,
            },
            {
                path: '/system/menu',
                name: 'menu',
                component: Menu,
            },
            {
                path: '/other',
                name: 'other',
                component: Other
            }
        ]
    },
]

export default new Router({
    // mode: 'hash',
    mode: 'history',
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRouterMap
})

3. left

数据准备：导航由menu和button组成，案例有menu(系统管理), button(other)组成，其中system下面有三个button(用户, 角色, 菜单)

menuList: [
{
    id: '1',
    name: '系统管理',
    type: 'menu',
    url: '..url',
    children: [
        {
            id: '2',
            name: '用户',
            type: 'button',
            url: '/system/user'
        },
        {
            id: '3',
            name: '角色',
            type: 'button',
            url: '/system/role'
        },
        {
            id: '4',
            name: '菜单',
            type: 'button',
            url: '/system/menu'
        },
    ]
},
{
    id: '5',
    name: 'Other',
    type: 'button',
    url: '/other'
}
]

标签/内容：el-menu里面由el-submenu, el-menu-item。其中submenu由template slot显示，而menu-item由router-link实现跳转

<template>
    <el-menu
            default-active="4"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose">
        <div v-for="menu in menuList" :key="menu.id">
            <el-submenu v-if=" menu.type == 'menu' ">
                <template slot="title">
                    <el-button type="text">{{menu.name}}</el-button>
                </template>
                <el-menu-item v-for="item in menu.children" :key="item.id">
                    <router-link :to="item.url">
                        <el-button type="text">{{item.name}}</el-button>
                    </router-link>
                </el-menu-item>
            </el-submenu>
            <el-menu-item v-else-if=" menu.type == 'button' ">
                <router-link :to="menu.url">
                    <el-button type="text">{{menu.name}}</el-button>
                </router-link>
            </el-menu-item>
        </div>
    </el-menu>
</template>