详细布局-----

header头部布局

<template>
  <div class="header">
    <a href="/">
      <img class="logo" src="@/assets/logo.jpg" alt="" width="25px" />
      <span class="company">cc管理系统</span>
    </a>
    <el-dropdown @command="handleCommand">
      <span class="dropdowm-title">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="a" icon="el-icon-edit"
          >修改密码</el-dropdown-item
        >
        <el-dropdown-item command="b" icon="el-icon-help"
          >退出系统</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleCommand(command) {
      this.$message('click on item ' + command);
    }
  }
};
</script>
<style scoped>
.logo {
  /* border: 1px solid red; */
  /* 图片垂直居中 */
  vertical-align: middle;
  /* 顺时针 */
  padding: 0 10px 0 40px;
}
.company {
  /* 固定位置，防止代码变乱 */
  position: absolute;
  color: white;
}
.el-dropdown {
  float: right;
  margin-right: 40px;
}
.dropdowm-title {
  color: white;
  cursor: pointer;
}
</style>

位置

下拉框的指令时间

---

navbar左侧菜单布局 

 

<template>
  <div class="navbar">
    <!-- default-active="2"默认选中的菜单 -->
    <!-- :router="true" 开启路由模式，index为跳转到路由 -->
    <el-menu
      default-active="/"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true"
    >
      <el-menu-item index="/">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="/member/">
        <i class="el-icon-user-solid"></i>
        <span slot="title">会员管理</span>
      </el-menu-item>
      <el-menu-item index="/supplier/">
        <i class="el-icon-s-cooperation"></i>
        <span slot="title">供应商管理</span>
      </el-menu-item>
      <el-menu-item index="/goods/">
        <i class="el-icon-s-goods"></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>

<script>
export default {};
</script>
<style scoped></style>

el-menu中的属性要知道

开启路由模式，:router="true" 跳转的路由时index的内容

---

main  -》菜单的路由渲染页

1.views中创建菜单中有的目录

2. router.js跳转页面（两种方式）

import Vue from 'vue';
import VueRouter from 'vue-router';

// 引入组件对象
import Login from '@/views/login';
import Layout from '@/components/layout.vue';
// 引入菜单组件对象
import Home from '@/views/home';
import Member from '@/views/member';
import Supplier from '@/views/supplier';
import Goods from '@/views/goods';
import Staff from '@/views/staff';

Vue.use(VueRouter);

const routes = [
  {
    path: '/login', //请求的地址
    name: 'login', //路由名称
    component: Login //组件对象
  },
  {
    path: '/', //请求的地址
    name: 'layout', //路由名称
    component: Layout, //组件对象
    redirect: '/home', //重定向到home
    children: [
      {
        path: '/home',
        component: Home,
        meta: { title: '首页' }
      },
      {
        path: '/member',
        component: Member,
        meta: { title: '会员管理' }
      },
      {
        path: '/supplier',
        component: Supplier,
        meta: { title: '供应商管理' }
      },
      {
        path: '/goods',
        component: Goods,
        meta: { title: '供应商管理' }
      }
      // {
      //   path: '/staff',
      //   component: Staff,
      //   meta: { title: '员工管理' }
      // }
    ]
  },
  {
    path: '/staff',
    component: Layout,
    children: [
      {
        path: '/',
        component: Staff,
        meta: { title: '员工管理' }
      }
    ]
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

3. 菜单的组件渲染出口

main中-》 <router-view></router-view>