导航面包屑

layouts/basic-layout/product.vue

@@ -9,16 +9,23 @@
             <table class="t_table_box">
               <tr>
                 <td class="t_title">
-                  <a class="a_goIndex" @click="goIndex">
+                  <a class="a_goIndex">
                     <b class="title">首页</b>
                   </a>
                 </td>
-              </tr>
-              <tr>
-                <td class="t_title">
-                  <a class="a_goIndex" @click="goIndexTwo">
-                    <b class="title">首页二</b>
-                  </a>
+                <td>
+                  <ul class="table_row_ul">
+                    <li>
+                      <a class="a_goIndex" @click="goIndex">
+                        首页一
+                      </a>
+                    </li>
+                    <li>
+                      <a class="a_goIndex" @click="goIndexTwo">
+                        首页二
+                      </a>
+                    </li>
+                  </ul>
                 </td>
               </tr>
               <tr v-for="(item,i) in filterSider">
@@ -28,8 +35,8 @@
                 </td>
                 <td>
                   <ul class="table_row_ul">
-                    <li v-for="(li,j) in item.children">
-                      <a @click="goPage(li,j)" :class="{'active': li.id === isActive}">{{li.title}}</a>
+                    <li v-for="(li) in item.children">
+                      <a @click="goPage(item,li)" :class="{'active': li.id === isActive}">{{li.title}}</a>
                     </li>
                   </ul>
                 </td>
@@ -39,7 +46,24 @@
           </div>
       </span>
         </a>
-      <i-header-breadcrumb v-if="showBreadcrumb && !headerMenu && !isMobile" ref="breadcrumb" />
+      <!-- <i-header-breadcrumb v-if="showBreadcrumb && !headerMenu && !isMobile" ref="breadcrumb" /> -->
+      <!-- {{}} -->
+      <Breadcrumb class="i-layout-header-breadcrumb" v-if="homeMenuItem==''"> 
+        <BreadcrumbItem to="/" class="white">
+            <Icon type="ios-home" title="首页"/>
+        </BreadcrumbItem>
+      </Breadcrumb>
+      <Breadcrumb class="i-layout-header-breadcrumb" v-else-if="homeMenuItem!=''" separator=">"> 
+        <BreadcrumbItem to="/" class="white">
+            <Icon type="ios-home" title="首页"/>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+            {{homeMenu}}
+        </BreadcrumbItem>
+        <BreadcrumbItem :to="parthto" class="white">
+            {{homeMenuItem}}
+        </BreadcrumbItem>
+      </Breadcrumb>
       <i-header-search v-if="showSearch && !headerMenu && !isMobile && !showBreadcrumb" />
       <div class="header_right">
         <i-header-search
@@ -113,7 +137,11 @@ export default {
       headerVisible: true,
       oldScrollTop: 0,
       isDelayHideSider: false, // hack，当从隐藏侧边栏的 header 切换到正常 header 时，防止 Logo 抖动
-      loadRouter: true
+      loadRouter: true,
+
+      homeMenu:'',
+      homeMenuItem:"",
+      parthto:'',
     };
   },
   computed: {
@@ -287,15 +315,24 @@ export default {
         }
       });
     },
-    goPage(u) {
-      this.$router.push(u.path)
-      this.isActive = u.id
+    goPage(u,li) {
+      this.$router.push(li.path)
+      this.isActive = li.id
+      this.homeMenu = u.title
+      this.homeMenuItem = li.title
+      this.parthto = li.path
     },
     goIndex(){
       this.$router.push("/")
+      this.homeMenu = ''
+      this.homeMenuItem = ''
+      this.isActive = 0
     },
     goIndexTwo(){
       this.$router.push("/home")
+      this.homeMenu = ''
+      this.homeMenuItem = ''
+      this.isActive = 0
     }
   },
   mounted() {
@@ -311,6 +348,18 @@ export default {
 </script>
 
 <style lang="less">
+.i-layout-header-breadcrumb .ivu-breadcrumb-item {
+    color: #A7B8CC!important;//wheat
+}
+.i-layout-header-breadcrumb .ivu-breadcrumb-item-link {
+    color: #ffffff!important;//wheat
+}
+.white{
+  color: #ffffff!important;
+  // a{
+  //   color: #ffffff!important;
+  // }
+}
 .product-layout {
   .ivu-layout-header {
     height: 50px;