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>

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

element-ui 左侧导航栏组件

猜你喜欢