element-ui 左側導航欄組件

element-ui 左側導航欄的布局實現，效果如下圖

涉及的組件：

　　App.vue

　　router.js

　　layout.vue： nav.vue（左側導航區域，內含循環小組件 asideBarItem.vue）、AppMain.vue （右側主內容區域）

　項目結構如下：

　　

1、App.vue，通過router路由來控制頁面的渲染， 很簡單，一個router-view

<template>
  <div id="app">
    <keep-alive> // 緩存組件，提高運行性能
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

2、router.js  (重點)，這里會引入layout作為模版組件， 以下舉例組件可自行選擇添加

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout/layout.vue'
import AppMain from '@/layout/conponents/AppMain.vue'  // 右側展示區域組件

Vue.use(Router)

export default new Router({
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'base',
      redirect: '/about',
      component: Layout,  // 主模版組件 
      meta: {  // 渲染右側區域的面包屑標題
        title: '公共組件',
        levelList: []
      },
      children: [
        {
          path: '/about',
          name: 'baseAbout',
          component: () => import('./views/About.vue'),  // 懶加載組件，提高運行性能
          meta: {
            title: '關於我們',
            levelList: []
          }
        }
      ]
    },
    {
      path: '/user',
      name: 'User_Nav',
      component: Layout,
      meta: {
        title: '用戶導航',
        levelList: []
      },
      children: [
        {
          path: '/user/info',
          name: 'userInfo',
          meta: {
            title: '用戶信息',
            levelList: []
          },
          component: AppMain,  // 右側區域模版組件
          children: [
            {
              path: '/user/info/userCenter',
              name: 'userCenter',
              meta: {
                title: '個人中心',
                levelList: []
              },
              component: AppMain,
              children: [
                {
                  path: '/user/info/userCenter/userLog',
                  name: 'orderList',
                  meta: {
                    title: '個人日志',
                    levelList: []
                  },
                  component: () => import('@/views/user.vue'),
                },
              ]
            },
            {
              path: '/user/info/order-list',
              name: 'orderList',
              meta: {
                title: '訂單列表',
                levelList: []
              },
              component: () => import('@/views/orderList.vue')
            },
            {
              path: '/user/info/address-list',
              name: 'addressList',
              meta: {
                title: '地址列表',
                levelList: []
              },
              component: () => import('@/views/addressList.vue')
            }
          ]
        },
        {
          path: '/user/login',
          name: 'baseAboutLogin',
          meta: {
            title: '登陸組件',
            levelList: []
          },
          component: () => import('./views/login.vue')
        }
      ]
    }
  ]
})

3、layerout 文件夾

　　3-1、 主文件 layout.vue

<template>
  <div class="app-contain">
       <!-- 左導航 -->
    <el-container class="index-container">
      <el-aside class="layout-contant">
        <Nav></Nav>
      </el-aside>
      
      <!-- 面包屑 簡化學習，暫時屏蔽 -->
      <!-- <el-main>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="item in levelList" :key="item.path">
            <a :href="item.path" v-if="item.parent">{{item.meta.title}}</a>
            <span v-else>{{item.meta.title}}</span>
          </el-breadcrumb-item>
        </el-breadcrumb> -->

        <!-- 右邊顯示區域 -->
       <App-main></App-main>
      </el-main>
    </el-container>
  </div>
</template>

　　3-2、nav.vue, 里面引入了asideBarItem.vue組件

<template>
  <div class="nav-contain">
    <el-menu
      router
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <AsideBarItem v-for="router in routers" 
        :key="router.path"
        :router="router"
      >
      </AsideBarItem>
    </el-menu>
  </div>
</template>

<script>
import AsideBarItem from './asideBarItem'
export default {
  name: 'mynav',
  components: {
    AsideBarItem
  }
}
</script>

<style lang="scss" scope>
.nav-contain{
  text-align: left;
}
</style>

　　3-3、asideBarItem.vue 小循環組件

<template>
  <div class="asideBarItem-contant">
    <!-- 如果hasOwnProperty監測有children 就循環遞歸展示 -->
    <el-submenu 
    :index="router.path"
     v-if="router.children">
      <span slot="title">{{router.meta.title}}</span>

      <!-- 遞歸有子孫導航組件 -->
      <asideBarItem
      v-for="child in router.children" 
      :key="child.path" 
      :router="child" >
      </asideBarItem>
    </el-submenu>

    <!-- 無子孫導航 -->
    <el-menu-item
    :key="router.path"
    :index="router.path"
    v-else
    >
      {{router.meta.title}}
    </el-menu-item>
  </div>
</template>

　　3-4、AppMain.vue 右側主渲染區域的組件， 很簡單，一個router-view

<template>
  <div class="appMain-container">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
  export default {
    data () {
         return {
        }
     }
  }
</script>
<style lang="scss" scoped>
   
</style>

注意：自定義的每個組件，寫上一些內容便於切換識別