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>

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