做项目时候navbar遇到的思考总结1。

众所周知

导航栏里面可以拆分

hamburger组件（就是点击侧边栏展开收缩得一个小图标）和面包屑breadcrmb组件

hamburger组件要和侧边栏通信 所以设置一个是否收缩得属性 :is-active和一个点击事件，

点击按钮（展开与折叠按钮），触发左侧菜单栏的张开与折叠，需要使用一个变量（state.sidebar.opened）来控制
为什么要用 state.sidebar.opened 全局变量?

原因是按钮组件与侧边栏组件不是父子组件的关系，按钮点击事件改变 state.sidebar.opened 值为 true 或 false。侧边栏组件需要读取 state.sidebar.opened 来决定自己是要展开还是折叠？
左侧 el-menu 组件中有 collapse 属性是控制菜单栏的展开与收缩。我们可以通过  state.sidebar.opened 值，来控制 el-menu元素
只是设置 el-menu 中 collapse 属性还是不够的, 还需要配置 左边侧边栏的隐藏样式, 通过state.sidebar.opened 动态显示样式
navbar中。

点击的时候触发父组件身上方法，父组件触发

  <div style="padding: 0 15px;" @click="toggleClick">

    toggleClick() {

      this.$emit('toggleClick')

    }

    <hamburger

      v-if="!isLoginModule"

      id="hamburger-container"

      :is-active="sidebar.opened"

      class="hamburger-container"

      @toggleClick="toggleSideBar"

    />

 点击得时候触发，父组件触发actions 触发commit 改变state中得数据！

    toggleSideBar() {

      this.$auth.store.dispatch('app/toggleSideBar')

    },

然后是面包屑 要获取路由数据

看路由得数据，如果该路由重定位到别的页面（不是这个页面了，就不管return，反之就获得面包屑。

需要渲染得title在meta对象中，所以先判断是都有这个属性，因为面包屑第一个总是首页，所以先判断每个路由是不是首页，不是就连接上首页，最终得到一个数组。

getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(
        item => item.meta && item.meta.title
      )
      const first = matched[0]
      //如果不是首页，就前面拼接上首页
      if (!this.isDashboard(first)) {
        matched = [{ path: '/home', meta: { title: '首页' } }].concat(matched)
      }
      //最终得到
      this.levelList = matched.filter(
        item => item.meta && item.meta.title && item.meta.breadcrumb !== false
      )
    },
    //判断是否是首页
    isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === '首页'.toLocaleLowerCase()
    },

然后得到数据就渲染

<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
          <span
            v-if="
              item.redirect === 'noRedirect' || index == levelList.length - 1
            "
            class="no-redirect"
          >
            {{ item.meta.title }}</span>
          <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
        </el-breadcrumb-item>

然后就是右侧下拉组件，没什么好说得。

收获就是跨组件通信~