面包屑

src/store/modules/app.js

@@ -6,7 +6,8 @@ const state = {
     withoutAnimation: false
   },
   device: 'desktop',
-  size: Cookies.get('size') || 'mini'
+  size: Cookies.get('size') || 'mini',
+  currentMenu: {}
 }
 
 const mutations = {
@@ -30,6 +31,9 @@ const mutations = {
   SET_SIZE: (state, size) => {
     state.size = size
     Cookies.set('size', size)
+  },
+  SET_CURRENT_MENU: (state, currentMenu) => {
+    state.currentMenu = currentMenu
   }
 }
 
@@ -45,6 +49,9 @@ const actions = {
   },
   setSize({ commit }, size) {
     commit('SET_SIZE', size)
+  },
+  setCurrentMenu({ commit }, currentMenu) {
+    commit('SET_CURRENT_MENU', currentMenu)
   }
 }
 

src/views/homepage/components/breadcrumb.vue

+<template>
+  <div class="showcase">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>{{ this.$store.state.app.currentMenu.name||'' }}</el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      visible: false
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+
+    })
+  },
+  methods: {
+    click() {
+      this.visible = !this.visible
+    }
+  }
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.showcase {
+  padding: 1px 15px 1px;
+  font-size: 20px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+}
+</style>

src/views/homepage/components/titleMenus.vue

@@ -8,7 +8,7 @@ export default {
   data() {
     return {
       menus: [
-        { name: '首页', active: true }, { name: '优质产品' }, { name: '优质供应商' }, { name: '解决方案与服务' }, { name: '软件系统' }, { name: '专业培训' }, { name: '行业资讯' }, { name: '信息发布' }
+        { name: '首页', url: '/home' }, { name: '优质产品', url: '/product' }, { name: '优质供应商' }, { name: '解决方案与服务' }, { name: '软件系统' }, { name: '专业培训' }, { name: '行业资讯' }, { name: '信息发布' }
       ],
       currentMenuObj: null
     }
@@ -16,11 +16,13 @@ export default {
   mounted() {
     this.$nextTick(() => {
       this.currentMenuObj = this.menus[0]
+      this.$store.dispatch('app/setCurrentMenu', this.currentMenuObj)
     })
   },
   methods: {
     menuClick(item) {
       this.currentMenuObj = item
+      this.$router.push({ path: item.url || '/home' })
     }
   }
 }

src/views/homepage/components/titleMenusV2.vue

@@ -17,7 +17,7 @@ export default {
   data() {
     return {
       menus: [
-        { name: '首页', active: true }, { name: '优质产品' }, { name: '优质供应商' }, { name: '解决方案与服务' }, { name: '软件系统' }, { name: '专业培训' }, { name: '行业资讯' }, { name: '信息发布' }
+        { name: '首页', url: '/home' }, { name: '优质产品', url: '/product' }, { name: '优质供应商' }, { name: '解决方案与服务' }, { name: '软件系统' }, { name: '专业培训' }, { name: '行业资讯' }, { name: '信息发布' }
       ],
       currentMenuObj: null
     }
@@ -25,11 +25,13 @@ export default {
   mounted() {
     this.$nextTick(() => {
       this.currentMenuObj = this.menus[this.menuIndex]
+      this.$store.dispatch('app/setCurrentMenu', this.currentMenuObj)
     })
   },
   methods: {
     menuClick(item) {
       this.currentMenuObj = item
+      this.$router.push({ path: item.url || '/home' })
     }
   }
 }

src/views/homepage/product/index.vue

@@ -10,12 +10,7 @@
       </div>
     </div>
     <div class="content-box">
-      <div class="showcase">
-        <el-breadcrumb separator-class="el-icon-arrow-right">
-          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
-          <el-breadcrumb-item>xxx</el-breadcrumb-item>
-        </el-breadcrumb>
-      </div>
+      <breadcrumb />
     </div>
     <div style="width:100vw;height: 100vh" />
     <home-footer ref="homeFooter" />
@@ -25,10 +20,11 @@
 import titleMenus from '../components/titleMenusV2'
 import userLogin from '../components/userLoginV2'
 import languageSetting from '../components/languageSettingV2'
+import breadcrumb from '../components/breadcrumb'
 import homeFooter from '../components/homeFooter'
 
 export default {
-  components: { titleMenus, userLogin, languageSetting, homeFooter },
+  components: { titleMenus, userLogin, languageSetting, breadcrumb, homeFooter },
   dicts: ['product_type', 'area_province'],
   data() {
     return {
@@ -45,20 +41,7 @@ export default {
     })
   },
   methods: {
-    onDictReady(dict) {
-      this.currentProductTypeObj = dict.product_type[0]
-    },
-    // 变更产品推送
-    changeProductPush(item) {
-      clearTimeout(this.throttle)
-      this.throttle = setTimeout(() => {
-        if (this.currentProductTypeObj === item) {
-          return
-        }
-        console.log(item)
-        this.currentProductTypeObj = item
-      }, this.throttleTime)
-    },
+    onDictReady(dict) {},
     // 点击询价
     inquiry(item, type) {
       console.log(item, type)
@@ -110,7 +93,7 @@ export default {
 .content-box {
   display: flex;
   justify-content: center;
-  margin-top: 90px;
+  margin-top: 94px;
   user-select: none;
   .showcase {
     width: 90%;