007_顶部导航栏与左侧导航联动的面包屑实现（vue+element）

001_顶部导航栏与左侧导航联动的面包屑实现(h3)

• \src\components\CommonAside.vue

<template>
  <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)">
      <i :class="'el-icon-' + item.icon"></i>
      <span slot="title">{{ item.label }}</span>
    </el-menu-item>
    <!-- 有子级菜单-->
    <el-submenu index="2" v-for="(item, index) in hasChildren" :key="index">
      <template slot="title">
        <i :class="'el-icon-' + item.icon"></i>
        <span>{{ item.label }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="subItem.path" v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="clickMenu(subItem)">
          <i :class="'el-icon-' + subItem.icon"></i>
          <span>{{ subItem.label }}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  computed: {
    noChildren() {
      return this.asideMenu.filter(item => !item.children)
    },
    hasChildren() {
      return this.asideMenu.filter(item => item.children)
    }
  },
  data() {
    //返回一个数组，通过数组的方式循环渲染出来
    return {
      asideMenu: [
        {
          path: '/',
          name: 'home',
          label: '首页',
          icon: 's-home'
        },
        {
          path: '/task',
          name: 'task',
          label: '试验任务',
          icon: 'document'
        },
        {
          path: '/appointment',
          name: 'appointment',
          label: '实验预约',
          icon: 'date'
        },

        {
          label: '其他',
          icon: 'user',
          children: [
            {
              path: '/page1',
              name: 'page1',
              label: '页面1',
              icon: 'setting'
            }
          ]
        }
      ]
    }
  },
  methods: {
    clickMenu(item) {
      this.$store.commit('selectMenu', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-menu {
  //使侧边栏占满屏幕高度
  height: 100%;
  border: none;
}
</style>

• \src\components\CommonHeader.vue

<template>
  <header>
    <div class="l-content">
      <el-button plain size="mini" icon="el-icon-menu"></el-button>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="current.path" v-if="current">
          {{ current.label }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-conten">
      <!-- 下拉菜单-->
      <el-dropdown trigger="click">
        <span class="el-dropdown-link"><img :src="userImg" class="user"/></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item>退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      current: state => state.tab.currentMenu
    })
  },
  data() {
    return {
      //以模块的方式引入，而不是字符串
      userImg: require('../assets/images/1.png')
    }
  }
}
</script>

<style lang="scss" scoped>
header {
  display: flex;
  height: 100%;
  align-items: center;
  //justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
  justify-content: space-between;
}
.l-content {
  display: flex;
  align-items: center;
  .el-button {
    margin-right: 20px;
  }
}
.r-conten {
  .user {
    width: 40px;
    height: 40px;
    border-radius: 30%;
  }
}
</style>
<!-- 组件嵌套在逐渐里面的样式 不能scoped-->
<style lang="scss">
.el-breadcrumb__item {
  .el-breadcrumb__inner {
    color: #666666;
    font-weight: normal;
  }
  &:last-child {
    .el-breadcrumb__inner {
      color: #ffffff;
    }
  }
}
</style>

• \src\store\index.js

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

//导入模块
import student from './student'
import tab from './tab'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    student,
    tab
  }
})

• \src\store\tab.js

export default {
  state: {
    currentMenu: null,
    menu: []
  },
  //同步修改state里面的值
  mutations: {
    selectMenu(state, val) {
      if (val.name !== 'home') {
        state.currentMenu = val
      } else {
        state.currentMenu = null
      }
    }
  },
  modules: {}
}

• 浏览器界面