element-ui 左侧导航栏组件

element-ui 左侧导航栏的布局实现，效果如下图

涉及的组件：

　　App.vue

　　router.js

　　layout.vue： nav.vue(左侧导航区域，内含循环小组件 asideBarItem.vue)、AppMain.vue (右侧主内容区域)

　项目结构如下：

　　

1、App.vue，通过router路由来控制页面的渲染， 很简单，一个router-view

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

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

　　3-3、asideBarItem.vue 小循环组件

　　3-4、AppMain.vue 右侧主渲染区域的组件， 很简单，一个router-view

注意：自定义的每个组件，写上一些内容便于切换识别