后台管理系统实现多级菜单路由

在vue实现后台管理系统时一般都有一个固定的界面布局，往往都会有左侧sider为菜单路由，右侧分header信息和main内容的展示。下面是一种比较常见的后台系统布局。

结构：

1、layout第一层路由视图

<template>
  <el-container class="app-container">
    <el-aside class="app-aside" :width="isCollapse?'60px':'200px'">
      <router-link to="/" class="aside-title">
        <img src="@/assets/logo.png" alt="">
        <span v-if="!isCollapse" style="padding-left:10px;">项目名称</span>
      </router-link>
      <side-bar :isCollapse="isCollapse"></side-bar>
    </el-aside>
    <el-container style="min-width:1200px;">
      <el-header class="app-header">
        <nav-bar></nav-bar>
      </el-header>
      <el-main class="app-main">
        <router-view/>
      </el-main>
    </el-container>
</el-container>
</template>

<script>
import sideBar from "./components/SideBar"
import navBar from "./components/Navbar"
export default {
  name:"layout",
  components:{
    sideBar,
    navBar
  },
  data(){
    return {
      isCollapse:false
    }
  },
  created(){
    window.addEventListener("resize",this.resizeHandler)
  },
  mounted(){
    this.resizeHandler()
  },
  methods:{
    resizeHandler(){
      if(document.body.getBoundingClientRect().width <1024) {
        this.isCollapse = true
      }else {
        this.isCollapse = false
      }
    }
  }
}
</script>

2、左侧部分的嵌套菜单路由

<template>
  <el-menu
    :router="true"
    :collapse="isCollapse"
    :collapse-transition="true"
    :default-active="$route.path"
    background-color="#304156"
    text-color="#BFCBD9"
    active-text-color="#4087CF">
    <menu-item v-for="route in menuMap" :key="route.path" :item="route" :base-path="route.path"></menu-item>
  </el-menu>
</template>

<script>
import MenuItem from './MenuItem.vue'
export default {
  name:"SideBar",
  components:{
    MenuItem
  },
  props:{
    isCollapse:{
      type:Boolean
    }
  },
  computed:{
    menuMap(){
      return this.$router.options.routes
    }
  }
}
</script>

3、hidden属性可以设置是否隐藏路由，alwaysShow可以设置在只有一个子路由的情况下是否展示父级菜单。

<template>
  <div v-if="!item.hidden && activeChildren.length > 0">
    <!-- 一级 -->
    <el-menu-item v-if="hasOneShowingChild(activeChildren,item) && !item.alwaysShow && (!singleShowChild.child || singleShowChild.isParent)" :index="basePath+'/'+singleShowChild.path">
      <i class="el-icon-menu"></i>
      <span>{{singleShowChild.meta.title}}</span>
    </el-menu-item>
    <!-- 多级 -->
    <el-submenu v-else :index="basePath+'/'+item.path">
      <!-- 一级 -->
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>{{item.meta.title}}</span>
      </template>
      <template v-for="child in activeChildren">
        <!-- 三级 -->
        <menu-item v-if="child.children && child.children.length>0" 
          :item="child" 
          :base-path="child.path+'/'+child.path" 
          v-bind="$attrs" 
          :key="child.name">
        </menu-item>
        <!-- 二级 -->
        <el-menu-item v-else :index="basePath+'/'+child.path" :key="child.name">
          <i class="el-icon-menu"></i>
          <span>{{child.meta.title}}</span>
        </el-menu-item>
      </template>
    </el-submenu>
  </div>
</template>

<script>
export default {
  name:"MenuItem",
  props:{
    item:{
      type:Object,
      required:true
    },
    basePath:{
      type:String,
      default:""
    }
  },
  data(){
    return {
      singleShowChild:null
    }
  },
  computed:{
    activeChildren() {

      if(!this.item.children) return [];
      return this.item.children.filter(child => !child.hidden);
    }
  },
  methods:{
    hasOneShowingChild(children, parent) {

      if(children.length === 1) {
        this.singleShowChild = children[0];
        return true;
      }

      if(children.length === 0) {
        this.singleShowChild = { ...parent, path: '', isParent: true}
        return true;
      }

      return false;
    }
  }
}
</script>