feat: 面包屑使用vuex

src/components/layout/header/HeaderDropdown.vue

@@ -65,7 +65,7 @@ export default {
       return (<div class="gs-dropdown-rect">
         <div class="rect-title"
              vOn:click_stop_prevent={() => {
-               this.$emit('itemClick', {...nav, parent: ['']})
+               this.$emit('itemClick', {...nav})
              }}
         >
           <span class="pointer">{nav.nameInHeaderNav ? nav.nameInHeaderNav : nav.name}</span>
@@ -83,7 +83,7 @@ export default {
         {items.map(item => {
           return (<div class="gs-dropdown-item">
             <span vOn:click_stop_prevent={() => {
-              this.$emit('itemClick', item)
+              this.$emit('itemClick', {...item})
             }}
                   class="pointer gs-hover"
             >{item.name}

src/components/layout/header/index.vue

@@ -28,7 +28,7 @@
                    aria-expanded="false">{{ nav.name }}</a>
 
                 <!-- Dropdown Menu -->
-                <HeaderDropdown :nav="nav"/>
+                <HeaderDropdown :nav="nav" @itemClick="handleItemClick"/>
                 <!-- End Dropdown Menu -->
               </li>
               <!-- Nav items End-->
@@ -63,7 +63,10 @@ export default {
   methods: {
     handleNavClick(nav) {
       this.currentNav = nav.id;
-    }
+    },
+    handleItemClick(item){
+      console.log(item);
+    },
   },
 };
 </script>

src/views/Business/index.vue

 <template>
   <div class="org container">
-    <breadcrumb/>
+    <breadcrumb :value="bread"/>
     <div class="row">
       <div class="col-lg-3">
         <left2/>
@@ -26,7 +26,13 @@ export default {
     zxcxgj,
   },
   data() {
-    return {};
+    return {
+      bread: [
+        {name: '首页', path: '/home'},
+        {name: '机构概况', path: '#'},
+        {name: '地方编码分支机构', path: '/Business'},
+      ]
+    };
   },
   created() {
     console.log(this.$route, "this.$route");

src/views/Search/index.vue

 <template>
-  <div></div>
+  <div class="container">
+    <breadcrumb :value="bread"/>
+    <div class="row">
+      <div class="col-lg-3">
+        <left2/>
+      </div>
+      <div class="col-lg-9">
+        <router-view class="marginTopLg20"></router-view>
+      </div>
+    </div>
+    <div class="marginTop20">
+      <zxcxgj/>
+    </div>
+  </div>
 </template>
 
 <script>

src/views/comps/breadcrumb.vue

 <template>
   <nav style="--bs-breadcrumb-divider: '>'" aria-label="breadcrumb">
     <ol class="breadcrumb">
-        <li class="breadcrumb-item"><a href="#">首页</a></li>
-        <li class="breadcrumb-item"><a href="#">机构概况</a></li>
-        <li class="breadcrumb-item active" aria-current="page">地方编码分支机构</li>
+      <template v-for="item in bread">
+        <li class="breadcrumb-item" v-if="!item.active" :key="item.path">
+          <a :href="item.path">{{ item.name }}</a>
+        </li>
+        <li class="breadcrumb-item active" v-else :key="item.path" aria-current="page">{{ item.name }}</li>
+      </template>
     </ol>
   </nav>
 </template>
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  computed: {
+    ...mapState('system',['breadcrumb']),
+    bread() {
+      const bread = [...this.breadcrumb];
+      bread[bread.length - 1].active = true;
+      return bread
+    },
+  }
+}
+</script>
 <style lang="scss">
-.breadcrumb{
-    margin-bottom: 20px ;
-    a{
+.breadcrumb {
+  margin-bottom: 20px;
+
+  &-item {
+    font-size: 12px;
+  }
+
+  a {
     color: #00799E;
     text-decoration: none;
   }
-  }
+}
 </style>

src/vuex/store.js

@@ -2,11 +2,13 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 import user from "./user/index.js"
+import system from "./system/index.js"
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
     modules: {
-        user: user,
+        user,
+        system
     }
 })

src/vuex/system/index.js

+import state from "./state.js"
+import mutations from "./mutations.js"
+
+export default {
+    namespaced: true,
+    state,
+    mutations,
+}

src/vuex/system/mutations.js

+const mutations = {
+    // 设置面包屑导航
+    SET_BREADCRUMB(state, value) {
+        state.breadcrumb = value || []
+    },
+
+    // 设置子页面导航
+    SET_SUB_NAV(state, value) {
+        state.subNav = value || []
+    },
+}
+
+export default mutations

src/vuex/system/state.js

+const state = {
+    breadcrumb: [],
+    subNav: [],
+}
+
+export default state