VUE使用Container布局容器实现左侧导航

一、项目结构

image.png

二、编写容器代码 App.vue

<template>
  <div id="app">
    <el-container>
      <el-header class="el-header" style="background-color: black">
        <home-header></home-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!--引入自定义左侧菜单栏-->
          <left-menu></left-menu>
        </el-aside>
        <el-main>
          <!--引入跳转路由-->
          <router-view ></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import HomeHeader from './components/Header'
  import LeftMenu from './components/LeftMenu'

  export default {
    name: "App",
    components: {
      HomeHeader,
      LeftMenu
    }
  }
</script>

<style>
</style>

三、编写其它组件代码

Header.vue

<template>
  <div>
        <span style="font-size: 28px; "><font color="#fff" style="vertical-align: middle">测试</font></span>
  </div>
</template>

<script>
  export default {
//定义调用名称
    name: 'HomeHeader'
  }
</script>

LeftMenu.vue

<template>
  <el-menu class="el-menu-vertical-demo"
           background-color="#E9EEF3"
           text-color="black">
          <el-submeu index="1" >
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <!--<template slot="title">分组一</template>-->
              <el-menu-item index="1-1">测试1</el-menu-item>
              <el-menu-item index="1-2">测试2</el-menu-item>
              <!--<el-menu-item-group title="分组2">-->
              <el-menu-item index="1-3">测试3</el-menu-item>
              <el-submenu index="1-4">
                <template slot="title">测试4</template>
                <el-menu-item index="1-4-1">选项4-1</el-menu-item>
              </el-submenu>
            </el-menu-item-group>
          </el-submeu>
        </el-menu>
</template>

<style>
  .el-menu-vertical-demo{
    height: 645px
  }
</style>

<script>
  export default {
    name: 'LeftMenu'
  }

</script>

Main.vue

<template>
    <span style="vertical-align: middle;"><font color="black">测试</font></span>
</template>

<script>
  export default {
    name: 'TableMain'
  }
</script>

index.vue

import Vue from 'vue'
import Router from 'vue-router'
import Container from '@/page/container'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Container',
      component: Container
    }
  ]
})

四、实现样式

image.png

注：
1、加载的过程是index.html->main.js->app.vue->index.js->helloworld.vue
2、element-ui样式不生效：main.js导入import 'element-ui/lib/theme-chalk/index.css'