layout布局组件

将之前Home.vue删除，并将其内容放到src/layout/index.vue中，因为后台布局基本都是这样的，所以我们将其当做组件封装起来。然后分别拆分出Sidebar.vue侧边栏组件和Navbar.vue头部组件。

// layout/index.vue
<template>
  <el-container class="app_container">
    <!-- 侧边栏 -->
    <sidebar></sidebar>
    <el-container>
      <!-- 头部 -->
      <el-header style="text-align: right; font-size: 12px">
        <navbar></navbar>
      </el-header>
      <!-- 内容 -->
      <el-main class="app-main">
        <transition name="fade-transform" mode="out-in">
          <router-view :key="key" />
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { Sidebar, Navbar } from './components';
export default {
  name: 'LayoutPage',
  computed: {
    key() {
      return this.$route.path;
    }
  },
  components: {
    Sidebar,
    Navbar
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>
<style lang="scss" scoped>
.app_container {
  height: 100%;
}
.el-header {
  color: #333;
  line-height: 60px;
  background-color: #b3c0d1;
}
.app-main {
  width: 100%;
  min-height: calc(100vh - 60px);
  background: #f5f7f9;
}
</style>

layout/components/index.js

// layout/components/index.js
export { default as Navbar } from './Navbar';
export { default as Sidebar } from './Sidebar';

layout/components/Navbar.vue

// layout/components/Navbar.vue
<template>
 <div>
    <span>{{userInfo.account}}</span>
    <el-dropdown>
      <i class="el-icon-setting" style="margin-right: 15px"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="handleLogout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
 </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'NavBar',
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    async handleLogout() {
      await this.$store.dispatch('account/logout');
      this.$router.push(`/admin/login?redirect=${this.$route.fullPath}`);
    }
  }
};
</script>
<style lang="scss" scoped>

</style>

layout/components/Sidebar.vue

// layout/components/Sidebar.vue
<template>
  <el-aside class="aside">
    <el-menu :default-openeds="['3']">
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>设置</template>
        <el-menu-item index="3-1" @click="$router.push('/admin/adminList')">管理员列表</el-menu-item>
        <el-menu-item index="3-2" @click="$router.push('/admin/roleList')">身份管理</el-menu-item>
        <el-menu-item index="3-3" @click="$router.push('/admin/menuList')">菜单管理</el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>
<script>
export default {
  name: 'SideBar'
};
</script>
<style lang="scss" scoped>
.aside {
  color: #333;
  width: 200px !important;
  background-color: rgb(238, 241, 246);
}
</style>

路由使用布局组件

伪代码：

import Layout from '@/layout'
...
{
    path: '/admin',
    name: 'admin',
    component: Layout,
    redirect: '/admin/index',
    children: [
      {
        path: 'index',
        name: 'index',
        component: () => import('@/views/Index')
      },
      {
        path: 'adminList',
        name: 'adminList',
        component: () => import('@/views/system/admin/adminList')
      },
      {
        path: 'roleList',
        name: 'roleList',
        component: () => import('@/views/system/admin/roleList')
      },
      {
        path: 'menuList',
        name: 'menuList',
        component: () => import('@/views/system/admin/menuList')
      },
    ]
  },

至此完成。。。未有详尽之处，后续迭代。