refactor:change layout

src/views/layout/components/AppMain.vue

@@ -0,0 +1,18 @@
+<template>
+  <section class="app-main">
+    <transition name="fade" mode="out-in">
+      <router-view :key="key"></router-view>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
+    }
+  }
+}
+</script>

src/views/layout/components/Navbar.vue

@@ -0,0 +1,99 @@
+<template>
+  <el-menu class="navbar" mode="horizontal">
+    <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
+    <breadcrumb></breadcrumb>
+    <el-dropdown class="avatar-container" trigger="click">
+      <div class="avatar-wrapper">
+        <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
+        <i class="el-icon-caret-bottom"></i>
+      </div>
+      <el-dropdown-menu class="user-dropdown" slot="dropdown">
+        <router-link class='inlineBlock' to="/">
+          <el-dropdown-item>
+            Home
+          </el-dropdown-item>
+        </router-link>
+        <el-dropdown-item divided>
+          <span @click="logout" style="display:block;">LogOut</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-menu>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload()  // 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .navbar {
+        height: 50px;
+        line-height: 50px;
+        border-radius: 0px !important;
+        .hamburger-container {
+            line-height: 58px;
+            height: 50px;
+            float: left;
+            padding: 0 10px;
+        }
+        .errLog-container {
+            display: inline-block;
+            position: absolute;
+            right: 150px;
+        }
+        .screenfull {
+            position: absolute;
+            right: 90px;
+            top: 16px;
+            color: red;
+        }
+        .avatar-container {
+            height: 50px;
+            display: inline-block;
+            position: absolute;
+            right: 35px;
+            .avatar-wrapper {
+                cursor: pointer;
+                margin-top: 5px;
+                position: relative;
+                .user-avatar {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 10px;
+                }
+                .el-icon-caret-bottom {
+                    position: absolute;
+                    right: -20px;
+                    top: 25px;
+                    font-size: 12px;
+                }
+            }
+        }
+    }
+</style>
+

src/views/layout/components/Sidebar/SidebarItem.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <template v-for="item in routes">
+      <router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
+        <el-menu-item :index="item.path+'/'+item.children[0].path">
+          <icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
+        </el-menu-item>
+      </router-link>
+      <el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
+        <template slot="title">
+          <icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
+        </template>
+        <template v-for="child in item.children" v-if='!child.hidden'>
+          <sidebar-item class='menu-indent' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
+          <router-link v-else class="menu-indent" :to="item.path+'/'+child.path">
+            <el-menu-item :index="item.path+'/'+child.path">
+              {{child.name}}
+            </el-menu-item>
+          </router-link>
+        </template>
+      </el-submenu>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SidebarItem',
+  props: {
+    routes: {
+      type: Array
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.svg-icon {
+  margin-right: 10px;
+}
+.hideSidebar .menu-indent{
+  display: block;
+  text-indent: 10px;
+}
+</style>
+

src/views/layout/components/Sidebar/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <el-menu mode="vertical" theme="dark" :default-active="$route.path">
+    <sidebar-item :routes="routes"></sidebar-item>
+  </el-menu>
+</template>
+
+<script>
+import SidebarItem from './SidebarItem'
+export default {
+  components: { SidebarItem },
+  computed: {
+    routes() {
+      return this.$router.options.routes
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-menu {
+  min-height: 100%;
+}
+</style>

src/views/layout/components/index.js

@@ -0,0 +1,3 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'