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>