el-container和el-menu搭建后台管理系统布局

效果图

1. 使用el-container搭建布局

src下的目录结构

layout文件夹下的index.vue

<template>
  <!-- element-ui布局 -->
  <el-container class="layout-container">
    <el-aside width="200px"
              class="aside">
      <!-- 使用自定义组件 ,可以使用驼峰命名-->
      <layout-aside class="aside-menu" />
    </el-aside>
    <el-container>
      <el-header class="header">Header</el-header>
      <el-main class="main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import layoutAside from './components/aside.vue'
export default {
  name: 'layoutIndex',
  props: {},
  components: {
    layoutAside
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  methods: {},
  created () { },
  mounted () { },
  beforeDestroy () { }
}
</script>
<style lang='less' scoped>
// 父级盒子撑满整个屏幕
.layout-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.aside {
  background-color: red;
  .aside-menu {
    height: 100%;
  }
}
.header {
  background-color: green;
}
.main {
  background-color: blue;
}
</style>

2. 结合el-menu，实现点击跳转到指定页面

layout文件夹下的comments文件夹下的aside.vue

注意：

1. index是激活索引，不一致即可，如果一致的话，点击导航，相同index的导航都会高亮显示
2. 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
3. 因为使用了，所以点击导航时，会在main中渲染对应的子路由

<template>
  <el-menu default-active="/"
           background-color="#002033"
           text-color="#fff"
           router
           active-text-color="#ffd04b">
    <el-menu-item index="/">
      <i class="el-icon-menu"></i>
      <span slot="title">首页</span>
    </el-menu-item>
    <el-menu-item index="/article">
      <i class="el-icon-document"></i>
      <span slot="title">内容管理</span>
    </el-menu-item>
    <el-menu-item index="/image">
      <i class="el-icon-setting"></i>
      <span slot="title">素材管理</span>
    </el-menu-item>
    <el-menu-item index="/publish">
      <i class="el-icon-menu"></i>
      <span slot="title">发布文章</span>
    </el-menu-item>
    <el-menu-item index="/comment">
      <i class="el-icon-document"></i>
      <span slot="title">评论管理</span>
    </el-menu-item>
    <el-menu-item index="/fans">
      <i class="el-icon-setting"></i>
      <span slot="title">粉丝管理</span>
    </el-menu-item>
    <el-menu-item index="/settings">
      <i class="el-icon-setting"></i>
      <span slot="title">个人设置</span>
    </el-menu-item>
  </el-menu>
</template>
<script>
export default {
  name: 'asideIndex',
  props: {},
  components: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  methods: {},
  created () { },
  mounted () { },
  beforeDestroy () { }
}
</script>
<style lang='less' scoped>
</style>

3. 结合子路由，在layout路由下配置子路由

router文件夹下的index.vue

import Vue from 'vue'
import VueRouter from 'vue-router'
// @表示src目录
import Login from '@/views/login'
import Home from '@/views/home'
import Layout from '@/views/layout'
import Article from '@/views/article'
import Image from '@/views/image'
import Publish from '@/views/publish'
import Comment from '@/views/comment'
import Fans from '@/views/fans'
import Settings from '@/views/settings'

Vue.use(VueRouter)

// 路由表
const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '', // path为空，此路由为默认子路由
        name: 'home',
        component: Home
      },
      {
        path: '/article',
        name: 'article',
        component: Article
      },
      {
        path: '/image',
        name: 'image',
        component: Image
      },
      {
        path: '/publish',
        name: 'publish',
        component: Publish
      },
      {
        path: '/comment',
        name: 'comment',
        component: Comment
      },
      {
        path: '/fans',
        name: 'fans',
        component: Fans
      },
      {
        path: '/settings',
        name: 'settings',
        component: Settings
      }
    ]
  }
]
const router = new VueRouter({
  routes
})

export default router