5-4 頂部導航菜單及與左側導航聯動的面包屑實現(下)

目錄：

• 實現動態面包屑
• 實現步驟

一、實現動態面包屑

1.1、點擊首頁只顯示首頁

1.2、點擊其他的頁面，顯示其他頁面

二、實現步驟

思路主要是通過Vuex 狀態改變的方式來實現的。

2.1、目錄結構

....
|-src
    ...
    |-store
        |-modules
            |-tab.js  //創建vuex狀態管理
        |-index.js
    |-views
        ....
.....

2.2、tab.js的實現

const state = {
  menu: [],
  currentMenu: null
};

const mutations = {
    selectMenu(state,val){
      //val.name != 'home' ? state.currentMenu = val:state.currentMenu = null;
      if(val.name != 'home'){
        state.currentMenu = val;
      }else {
        state.currentMenu = null;
      }
    }
};

const actions = {

};

export default {
  state,
  mutations,
  actions
}

2.3、index.js導出

import Vue from 'vue'
import Vuex from 'Vuex'

import tab from './modules/tab.js'

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    tab
  }
})

2.5、Aside.vue的編寫

說明：定義clickMenu方法，commit提交selectMenu方法，獲取菜單的值

<template>
  <!--background-color自定義顏色-->
  <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
    <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path" @click="clickMenu(item)"><!--綁定clickMenu方法，傳入參數item-->
      .....
    </el-menu-item>
    <el-submenu index="item.path" v-for="(item,index) in hasChildren" :key="index">
      .....
      <el-menu-item-group><!--綁定clickMenu方法，傳入參數item-->
        <el-menu-item :index="subItem.path" v-for="(subItem,subIndex) in item.children" :key="subIndex" @click="clickMenu(subItem)">{{subItem.label}}</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
    export default {
        computed: {....},
        data(){...},
        methods: {
          clickMenu(item){
            this.$store.commit('selectMenu',item)  //commit 調用 tab.js中的 mutations中的selectMenu方法
          }
        }
    }
</script>

<style scoped>
  ....
</style>

2.4、Header.vue的編寫

說明：通過mapState獲取菜單的值

<template>
    <header>
      <div class="l-content">
        ....
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
          <el-breadcrumb-item :to="curent.path" v-if="curent">{{curent.label}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      .....
    </header>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
      computed: mapState({
          curent: state => state.tab.currentMenu   //直接獲取當前菜單的值,因為 tab.js在index.js中是modules中，不在公共組件中，所以要使用state.模塊名.屬性名
        }),
      data(){.....}
      }
    }
</script>

<style scoped>
....
</style>


<style>
  .el-breadcrumb__item:last-child .el-breadcrumb__inner {   /*面包屑除首頁之外的按鈕字體顏色*/
    color: #f4f4f4;
  }

  .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{   /*面包屑除首頁字體顏色*/
    color: #fff;
  }
</style>