記錄管理後臺 側邊導航欄做成通用小元件

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