refactor:layout

src/views/layout/components/Levelbar.vue

@@ -1,58 +0,0 @@
-<template>
-  <el-breadcrumb class="app-levelbar" separator="/">
-   <transition-group name="breadcrumb">
-    <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path" v-if='item.meta.title'>
-      <span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{generateTitle(item.meta.title)}}</span>
-      <router-link v-else :to="item.redirect||item.path">{{generateTitle(item.meta.title)}}</router-link>
-    </el-breadcrumb-item>
-     </transition-group>
-  </el-breadcrumb>
-</template>
-
-<script>
-export default {
-  created() {
-    this.getBreadcrumb()
-  },
-  data() {
-    return {
-      levelList: null
-    }
-  },
-  methods: {
-    getBreadcrumb() {
-      let matched = this.$route.matched.filter(item => item.name)
-      if (matched.length === 0) {
-        this.levelList = [{ path: '/', meta: { title: '首页' }}]
-        return
-      }
-      const first = matched[0]
-      if (first && first.name !== 'dashboard') {
-        matched = [{ path: '/', meta: { title: 'dashboard' }}].concat(matched)
-      }
-      this.levelList = matched
-    },
-    generateTitle(title) {
-      return this.$t('route.' + title)
-    }
-  },
-  watch: {
-    $route() {
-      this.getBreadcrumb()
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .app-levelbar.el-breadcrumb {
-    display: inline-block;
-    font-size: 14px;
-    line-height: 50px;
-    margin-left: 10px;
-    .no-redirect {
-      color: #97a8be;
-      cursor: text;
-    }
-  }
-</style>

src/views/layout/components/Navbar.vue

@@ -2,7 +2,7 @@
   <el-menu class="navbar" mode="horizontal">
     <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
 
-    <levelbar class="levelbar-container"></levelbar>
+    <breadcrumb class="breadcrumb-container"></breadcrumb>
 
     <div class="right-menu">
 
@@ -53,7 +53,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import Levelbar from './Levelbar'
+import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
 import ThemePicker from '@/components/ThemePicker'
 import Screenfull from '@/components/Screenfull'
@@ -62,7 +62,7 @@ import errLogStore from 'store/errLog'
 
 export default {
   components: {
-    Levelbar,
+    Breadcrumb,
     Hamburger,
     ThemePicker,
     ErrorLog,
@@ -113,7 +113,7 @@ export default {
     float: left;
     padding: 0 10px;
   }
-  .levelbar-container{
+  .breadcrumb-container{
     float: left;
   }
   .errLog-container {

src/views/layout/components/index.js

@@ -1,4 +1,4 @@
 export { default as Navbar } from './Navbar'
-export { default as Sidebar } from './Sidebar'
+export { default as Sidebar } from './Sidebar/index.vue'
 export { default as TabsView } from './TabsView'
 export { default as AppMain } from './AppMain'