Vue--ElementUI实现头部组件和左侧组件效果

<template>
  <!-- logo和文字 -->
  <div class="header">
    <a href="#/">   <!-- 点击进入首页 -->
      <img class="logo" src="@/assets/Logo1.png" width="25px" />
      <span class="company">邹邹管理系统</span>
    </a>
  <!-- logo和文字结束 -->
  <!--  下拉菜单-->
<el-dropdown @command="handleCommand"><!--  绑定指令,在methods里定义-->
    <span class="el-dropdown-link">
      您好
      <i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
        <!-- icon是修改图标 ，command是点击后传给方法的值-->
      <el-dropdown-item icon="el-icon-edit" command="edit">>修改密码</el-dropdown-item>
      <el-dropdown-item icon="el-icon-s-operation" command="quit">>退出登录</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>
  <!--  下拉菜单结束-->
  </div>
</template>
<script>
  export default {
    methods: {
      handleCommand(command){
        this.$message(`点击了${command}`)
      }
    },
  }
</script>
<style scoped>
/* logo */
.logo {
  vertical-align: middle; /* 居中 */
  padding: 0px 10px 0px 40px; /* 上右下左 */
}
/* 文字 */
.company {
  position: absolute;
  color: white;
}
/* 下拉菜单 */
.el-dropdown{
    float: right; /* 浮动在右边 */
    margin-right: 40px; /* 靠右40px */
}
/* 系统管理 */
.el-dropdown-link{
    color: white;
    cursor: pointer; /* 鼠标放上去是手的形状 */
}
</style>

<template>  <!-- 使用element的导航菜单 -->
  <div class="navbar">
    <!--default-active默认选中的菜单，选中后颜色是 active-text-color  -->
    <!--  :router='true',true表示开启路由模式，开启之后，index值代表的就是路由地址-->
    <!--  :router='true'开启之后点击就会跳转到对应的路由，默认为false -->
    <!-- text-color 文字的颜色 -->
    <el-menu :router='true' default-active="/home" class="el-menu-vertical-demo" background-color="#545c64"
      text-color="#fff" active-text-color="#ffd04b">
      <!-- 首页  class就是对应的icon -->
      <el-menu-item index="/home">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <!-- 会员管理 index下的左右 / 别忘记-->
      <el-menu-item index="/member/">
        <i class="el-icon-s-custom"></i>
        <span slot="title">会员管理</span>
      </el-menu-item>
      <!-- 供应商管理 -->
      <el-menu-item index="/supplier/">
        <i class="el-icon-menu"></i>
        <span slot="title">供应商管理</span>
      </el-menu-item>
      <!-- 商品管理 -->
      <el-menu-item index="/goods/">
        <i class="el-icon-suitcase-1"></i>
        <span slot="title">商品管理</span>
      </el-menu-item>
      <!-- 员工管理 -->
      <el-menu-item index="/staff/">
        <i class="el-icon-user"></i>
        <span slot="title">员工管理</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<style scoped>
  /* 去掉右边框 */
  .el-menu {
    border-right: none;
  }
</style>

import Vue from "vue";
import Router from "vue-router";
// import Login from '@/views/login/index'
// 下面的情况，默认会导入@/views/login下的index.vue组件
import Login from '@/views/login'
import Layout from '@/components/Layout'
import Home from '@/views/home'
Vue.use(Router);
export default new Router({
      routes: [
        {
          path: '/login',
          name: 'login', // 路由名称
          component: Login // 组件对象
        },
        {
          path: '/',
          name: 'layout', // 路由名称
          redirect: '/home', // 当访问 / 时重定向到 home
          component: Layout , // 组件对象
          // 因为首页，商品，会员都是 Layout 下的 main 里的，所以要将这些组件作为 Layout 组件的子组件，使用children，里面是一个数组，接收一个个对象
          // meta 是
          children: [
            {
              path: '/home',
              component: Home,
              meta: {title: '首页'}
            }
          ]
        },
      ]
});

<template>
  <div class="main">
    <router-view> </router-view> <!-- 组件的出口 -->
  </div>
</template>

import Vue from "vue";
import Router from "vue-router";
// import Login from '@/views/login/index'
// 下面的情况，默认会导入@/views/login下的index.vue组件
import Login from '@/views/login'
import Layout from '@/components/Layout'
import Home from '@/views/home'
import Member from '@/views/member'
import Goods from '@/views/goods'
import Staff from '@/views/staff'
import Supplier from '@/views/supplier'
Vue.use(Router);
export default new Router({
      routes: [
        {
          path: '/login',
          name: 'login', // 路由名称
          component: Login // 组件对象
        },
        {
          path: '/',
          name: 'layout', // 路由名称
          redirect: '/home', // 当访问 / 时重定向到 home
          component: Layout , // 组件对象
          // 因为首页，商品，会员都是 Layout 下的 main 里的，所以要将这些组件作为 Layout 组件的子组件，使用children，里面是一个数组，接收一个个对象
          // meta 是
          children: [
            {
              path: '/home',
              component: Home,
              meta: {title: '首页'}
            },
            // {
            //   path: '/member',
            //   component: Member,
            //   meta: {title: '会员管理'}
            // },
          ]
        },
        // 上面的是一种写法，可以放在children下面，还有一种方法是下面的这种
        // 当访问 /member 时，渲染的是 Layout 组件，
        {
          path: '/member',
          component: Layout,
          children: [
            {
              path: '/', // 等价于 /member/,请求 /member 时会在后面拼接个 / 因为AppNavbar下的index.vue写的是/member/
              component: Member,
              meta: {title: '会员管理'}
            }
          ]
        },
        {
          path: '/supplier',
          component: Layout,
          children:[
              {
                path: '/',  
                component: Supplier,
                meta: {title: '供应商管理'}
              }
          ]
        },
        {
          path: '/goods',
          component: Layout,
          children:[
              {
                path: '/',  
                component: Goods,
                meta: {title: '商品管理'}
              }
          ]
        },
        {
          path: '/staff',
          component: Layout,
          children:[
              {
                path: '/',  
                component: Staff,
                meta: {title: '员工管理'}
              }
          ]
        }
      ]
});