面包屑改造

vue/src/layout/component/Main/component/Breadcrumb.vue

@@ -1,8 +1,8 @@
 <template>
     <el-breadcrumb class="app-breadcrumb">
         <transition-group name="breadcrumb">
-            <el-breadcrumb-item v-for="item in data" :key="item.path">
-                <span class="no-redirect">{{ item.meta.title }}</span>
+            <el-breadcrumb-item v-for="(item,index) in data" :key="item.path">
+                <span :class="{'no-redirect': index !== data.length-1}">{{ item.meta.title }}</span>
             </el-breadcrumb-item>
         </transition-group>
     </el-breadcrumb>
@@ -33,14 +33,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@/asset/style/variables.scss";
-
 .app-breadcrumb {
-    margin: 0 8px;
-    line-height: $nav-height;
+    width: 100%;
+    background: #fff;
+    padding: 16px 24px;
 
     .no-redirect {
-        color: $--color-gray;
+        color: #909399;
         cursor: text;
     }
 }

vue/src/layout/component/Main/index.vue

@@ -1,6 +1,7 @@
 <template>
     <main class="app-main">
         <div v-show="!showIframe" class="scroll-container">
+            <breadcrumb v-if="showBreadcrumb"/>
             <page-view :include="cachedViews" :transition-name="transitionName"/>
             <page-footer/>
         </div>
@@ -26,15 +27,17 @@ import {getters as iframeGetters} from "@/layout/store/iframe"
 import {getters as settingGetters} from "@/layout/store/setting"
 import {getters as tagsViewGetters} from "@/layout/store/tagsView"
 import BackToTop from "./component/BackToTop"
+import Breadcrumb from './component/Breadcrumb'
 import PageView from "./component/PageView"
 import PageFooter from "./component/PageFooter"
 
 export default {
     name: 'AppMain',
 
-    components: {BackToTop, PageView, PageFooter},
+    components: {BackToTop, Breadcrumb,PageView, PageFooter},
 
     computed: {
+        showBreadcrumb: () => settingGetters.showBreadcrumb,
         showBackToTop:()=>settingGetters.showBackToTop,
 
         cachedViews:()=>tagsViewGetters.cachedViews,

vue/src/layout/component/Navbar/index.vue

@@ -3,8 +3,6 @@
         <div style="width: 30%">
             <hamburger class="navbar-item" :render="renderHamburger" :active="!sidebarCollapse" @click="sidebarCtrl"/>
 
-            <breadcrumb v-if="showBreadcrumb"/>
-
             <root-menu :active-menu="activeRootMenu" :menu="menus" always-show/>
         </div>
 
@@ -51,7 +49,6 @@
 import {mapState} from 'vuex'
 import GuideMixin from '@/mixin/guide'
 import Bell from "./component/Bell"
-import Breadcrumb from './component/Breadcrumb'
 import Hamburger from './component/Hamburger'
 import RootMenu from "./component/RootMenu"
 import SettingDrawer from './component/SettingDrawer'
@@ -64,7 +61,7 @@ export default {
 
     mixins: [GuideMixin.navbar],
 
-    components: {Hamburger, Breadcrumb, Bell, RootMenu, SettingDrawer},
+    components: {Hamburger, Bell, RootMenu, SettingDrawer},
 
     data: () => ({settingDrawer: false}),
 
@@ -77,7 +74,6 @@ export default {
 
         sidebarAutoHidden: () => settingGetters.sidebarAutoHidden,
         sidebarCollapse: () => settingGetters.sidebarCollapse,
-        showBreadcrumb: () => settingGetters.showBreadcrumb,
 
         renderHamburger() {
             return !(this.device === 'pc' && this.sidebarAutoHidden)