布局

页面整体布局是一个产品最外层的框架结构，往往会包含导航、侧边栏、面包屑以及内容等。想要了解一个后台项目，先要了解它的基础布局。

layout

layout.png

我们的项目大部分页面都是基于这个 layout 的，除了个别页面如： login , 404, 401 等页面没有使用该layout。因此我们在路由表里设置layout为父组件，在layout的Content里配置router-view作为匹配组件的出口

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from "./views/Login";
import Layout from "./components/Layout"
import Notebooks from './views/Notebooks'
import Notes from './views/Notes'
import Trash from './views/Trash'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Layout,
      redirect: '/notebooks',
      children: [
        {
          path: 'notebooks',
          component: Notebooks
        },
        {
          path: 'notes',
          component: Notes
        },
        {
          path: 'trash',
          component: Trash
        },
        {
          path: 'hello',
          component: HelloWorld
        }
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
  ]
})

这里使用了 vue-router 路由嵌套, 所以一般情况下，你增加或者修改页面只会影响 app-main这个主体区域。其它配置在 layout 中的内容如：侧边栏或者导航栏都是不会随着你主体页面变化而变化的。

---

layout code

<template>
    <Layout class='layout'>
        <Header class="header">
            <Row>
                <i-col span="3" offset="1">
                    <img src="../../static/logo1.png" alt="logo" class="logo">
                </i-col>
                <i-col span="14">
                    <h1 style='font-weight: 400;font-size: 20px;margin-left:0'>保持进步,随时印象笔记</h1>
                </i-col>
                <i-col span="4" style='float: right'>
                    <Row>
                        <i-col span="8">
                            <Dropdown>
                                <Avatar src="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar"></Avatar>
                                <DropdownMenu slot="list">
                                    <DropdownItem>我的主页</DropdownItem>
                                    <DropdownItem>我的收藏</DropdownItem>
                                    <DropdownItem>
                                        设置
                                        <Badge status="error" />
                                    </DropdownItem>
                                    <DropdownItem divided>退出登录</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </i-col>
                        <i-col span="8">
                            <Dropdown>
                                <Badge :count="count" :offset="[20,4]">
                                    <Icon type="md-notifications-outline" size="24" />
                                </Badge>
                                <DropdownMenu slot="list">
                                    <Tabs value="notification">
                                        <TabPane label="通知" name="notification">
                                            <div class="notification">通知内容</div>
                                        </TabPane>
                                        <TabPane label="关注" name="follow">
                                            <div class="notification">关注内容</div>
                                        </TabPane>
                                        <TabPane label="系统" name="system">
                                            <div class="notification">系统内容</div>
                                        </TabPane>
                                    </Tabs>
                                </DropdownMenu>
                            </Dropdown>
                        </i-col>
                        <i-col span='8'>
                            <Icon type="md-color-palette" size="24"></Icon>
                        </i-col>
                    </Row>
                </i-col>
            </Row>
        </Header>
        <Layout>
            <Sider class="sider" width="240" collapsible v-model="isCollapsed" :class="{ 'sider-hide': isCollapsed }">
                <Menu class="sider-menu" theme="dark" :active-name="activeName">
                    <MenuItem name="/notebooks" to='/notebooks'>
                        <Icon type="ios-search"></Icon>
                        <span>笔记本列表</span>
                    </MenuItem>
                    <MenuItem name="/notes" to='/notes'>
                        <Icon type="ios-apps"></Icon>
                        <span>笔记列表</span>
                    </MenuItem>
                    <MenuItem name="/trash" to='/trash'>
                        <Icon type="ios-bookmark"></Icon>
                        <span>回收站</span>
                    </MenuItem>
                </Menu>
            </Sider>
            <Content class="content" :class="{ 'content-expand': isCollapsed }">
               <router-view></router-view>
            </Content>
        </Layout>
        <Drawer title="选择配色" v-model="openTheme" :closable="false">

        </Drawer>
    </Layout>
</template>
<script>
    export default {
        props: {},
        data () {
            return {
                activeName: this.$route.path,
                count: 2,
                openTheme: false,
                isCollapsed: false
            };
        },
        created () {
            this.activeName = this.$route.path
            console.log(this.$route.path)
        }
    };
</script>

<style>
    .layout {
      min-height: 100vh
    }
    .header{
        width: 100%;
        height: 60px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.05);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
    }
    .logo{
        height: 50px;
        margin-top: 5px;
    }
    .notification{
        text-align: center;
        height: 200px;
    }
    .ivu-menu {
      text-align: left
    }
    .ivu-menu-horizontal.ivu-menu-light:after{
        display: none;
    }
    .sider{
        position: fixed;
        height: 100%;
        left: 0;
        overflow: auto;
        z-index: 1;
    }
    .sider-menu{
        margin-top: 60px;
    }
    .sider-hide .ivu-menu-item span{
        display: none;
    }
    .content{
        margin-left: 260px;
        margin-top: 60px;
        padding: 16px;
        transition: all .2s ease-in-out;
        overflow: auto
    }
    .content-expand{
        margin-left: 84px;

    }
</style>

code.png