vue Elemente-UI 管理后台自定义 导航菜单栏

记录管理后台 侧边导航栏做成通用小组件 

借助 Elemente-UI  <el-aside>：侧边栏容器 <<el-menu>：导航菜单

创建 父组件页面

aside.vue

*（

     default-active 为当前激活菜单的 index，（设置为当前的路由名称 this.$route.fullPath）

     @select 事件为 菜单选择触发的事件 借助跳转路由 并设置 default-active 的值 

）

<el-aside>
    <el-menu
          :default-active="$store.getters.active"
          class="el-menu-vertical-demo"
          @select="menuSelected"
          background-color="#F0F6F6"
          text-color="#3C3F41"
          active-text-color="black"
          unique-opened
          collapse-transition
        >
          <NavMenu :navMenus="$router.options.routes"></NavMenu>
    </el-menu>
</el-aside>

import NavMenu from '@/components/NavMenuWk'// 引入子组件

components: {
  NavMenu// 声明子组件
}
menuSelected (e) {
    // e 当前点击返回的路由
    if (this.$route.fullPath === e) return // 当前路由不做操作
    this.$store.commit('active', e)
    this.$router.push(e)
}

 

创建子组件页面

NavMenuWk.vue

*（

   判断当前组路由有没有子级 并判断是否显示路由 !navMenu.children&&!navMenu.hidden

   将:index="navMenu.path" 设置为路由 为menuSelected事件点击返回的参数 (:index的值只能是字符串)

   icon 为图标

   如果有子级 继续调用本身 再次进行循环 <NavMenu>

）

<template>
  <div class="navMenu">
    <label v-for="(navMenu,index) in navMenus" :key="index">
      <el-menu-item v-if="(!navMenu.children&&!navMenu.hidden)"
         :key="navMenu.path"
         :index="navMenu.path">
         <template slot="title">
           <img v-if="navMenu.icon" :src="navMenu.icon" alt="" slot="title" class="icon">
           <span slot="title">{{navMenu.name}}</span>
         </template>
      </el-menu-item>
      <el-submenu v-if="navMenu.children&&!navMenu.hidden"
         :key="navMenu.path"
         :index="navMenu.path">
         <template slot="title">
            <img v-if="navMenu.icon" :src="navMenu.icon" alt="" slot="title" class="icon">
            <span> {{navMenu.name}}</span>
         </template>
         <NavMenu :navMenus="navMenu.children"></NavMenu>
      </el-submenu>
    </label>
  </div>
</template>
<script>
export default {
  name: 'NavMenu',
  props: ['navMenus'],
  data () {
    return {
    }
  },

  methods: {
  }
}
</script>
<style scoped>
.icon{
width:16px;
height:16px;
margin-right:5px;
}
</style>

 

 设置route (可直接设置 可使用服务端接口返回 数据格式如下)

 routes: [
    {
      path: '/',
      redirect: '/article',
      hidden: true
    },
    {
      path: '/Home',
      component: Home,
      name: '文章管理',
      children: [
        {
          path: '/article',
          name: '文章管理',
          component: article,
          hidden: false
        },
        {
          path: '/compileArticle',
          name: '文章编辑',
          component: compileArticle,
          hidden: true
        }
      ]
    },
    {
      path: '/Homes',
      component: Home,
      name: '归属管理',
      children: [
        {
          path: '/affiliation',
          name: '归属管理',
          component: affiliation,
          hidden: false
        },
        {
          path: '/compileAffiliation',
          name: '归属编辑',
          component: compileAffiliation,
          hidden: true
        }
      ]
    }
  ]