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
        }
      ]
    }
  ]