11-element-ui+vue通过路由配置导航（上）

配置静态导航

• nav.vue

<template>
  <div>
    <breadcrumb @changeActive="changeCurActive" />
    <el-container>
      <el-aside class="bg-color1 left">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="handleSelect"
        >
          <template v-for="( item, index1) in routeList">
            <template v-if="item.isShowInNav">
              <barItem :item="item" />
            </template>
          </template>
        </el-menu>
      </el-aside>
      <el-container class="bg-color1">
        <transition name="fade" mode="out-in">
          <router-view />
        </transition>
      </el-container>
    </el-container>
  </div>

</template>

<script>
import breadcrumb from './components/breadCrumb'
import barItem from './components/barItem'
export default {
    name: 'Layout',
    components: {
        breadcrumb, barItem
    },
    data() {
        return {
            routeList: []
        }
    },
    computed: {

    },
    created() {
        this.routeList = this.$router.options.routes
    },
    methods: {
        handleSelect(key, keyPath) {
            if (key.includes('/')) {
                this.$router.push(key)
            }
        },
        changeCurActive(item) {
            this.curActive = item
        }
    }
}
</script>

<style lang='scss'>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .bg-color1 {
    background:#43bbbb;
  }
  .left{margin-right:10px;}
  .el-breadcrumb{
    margin-bottom: 15px;
  }

  .fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .3s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .3s;
}
</style>

• item.vue

<template>
  <div>
    <template v-if="onlyOne(item)">
      <el-menu-item :index="item.children[0].path">
        <span :class="['iconfont','icon-'+item.children[0].meta.icon]" />
        <span slot="title">{{ item.children[0].meta.title }}</span>
      </el-menu-item>
    </template>
    <template v-else>
      <el-submenu index="index">
        <template slot="title">
          <i :class="['iconfont','icon-'+item.meta.icon]" />
          <span>{{ item.meta.title }}</span>
        </template>
        <template v-for="child in item.children">
          <el-menu-item :index="child.path">
            <span slot="title">{{ child.meta.title }}</span>
          </el-menu-item>
        </template>
      </el-submenu>
    </template>
  </div>

</template>

<script>
export default {
    components: {
    },
    props: ['item'],
    data() {
        return {

        }
    },
    methods: {
        onlyOne(item) {
            if (item.children && item.children.length === 1) {
                return true
            }
            return false
        }
    }
}
</script>

<style scoped>
.iconfont{margin-right: 10px;}
</style>