vue&Element-ui实现的导航菜单

vue&Element-ui实现导航菜单

网上有很多demo和示例，有的可以实现二级但不支持三级，有的支持三级但是有些复杂（也许是因为本人技术能力不足），当然也可以找到完整的模板，套用起来很方便，，，直接套用模板担心后续修改会有后遗症，好了~~~直接上代码吧，总之这个写法也许不是最好的，但是对于初学者很好理解

所需依赖及组件

1、首先需要安装element-ui并且在main.js中引入（npm、vue-cli创建新项目等在这里不做介绍）
（1）安装：npm i element-ui -S
（2）main.js中引入：
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI)
2、根据需要写好组件，包含公共组件及各模块所需组件，并且配置路由
（1）公共布局组件
（2）公共路由承载组件
（3）各模块对应组件
主要代码存放结构如下图

组件介绍

1、公共布局组件-----layout布局组件中存放内容（具体布局及样式根据需要而定）

2、公共承载组件----AppMain组件中存放内容

3、菜单渲染组件sidebar（index.vue）

<template>
    <div class="sidebar">
        <el-menu :show-timeout="200" :default-active="$route.path" :collapse="isCollapse"
            mode="vertical" background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF" router>
             <template v-for="(item,index) in routes" v-if="!item.hidden" >
                 <!-- 一级菜单 -->
                <el-menu-item v-if="!item.leaf && !item.leafThree && item.children.length>0" :index="item.path"> 
                    <i :class="item.meta.icon"></i>
                    <span slot="title">{{item.name}}</span>
                </el-menu-item>
                <!-- 二级菜单 -->
                <el-submenu :index="index+''" v-if="item.leaf">
                    <template slot="title">
                        <i :class="item.meta.icon"></i>
                        <span>{{item.name}}</span>
                    </template>
                    <el-menu-item v-for="child in item.children" :index="child.path" v-if="!child.hidden"  :key="child.path">
                        <i :class="child.meta.icon"></i>
                        <span>{{child.name}}</span>
                    </el-menu-item>
                </el-submenu>
                <!-- 三级菜单 -->
                <el-submenu :index="index+''" v-if="!item.leaf && item.leafThree">
                    <template slot="title">
                        <i :class="item.meta.icon"></i>
                        <span>{{item.name}}</span>
                    </template>
                         
                    <el-submenu v-for="child in item.children" :index="child.path" :key="child.path" v-if="child.leaf">
                        <template slot="title">
                             <i :class="child.meta.icon"></i>
                            <span>{{child.name}}</span>
                        </template>
                        <el-menu-item v-for="childThree in child.children" :index="childThree.path" :key="childThree.path">
                            <i :class="childThree.meta.icon"></i>
                            <span>{{childThree.name}}</span>
                        </el-menu-item>   
                    </el-submenu>
                    <el-menu-item v-for="child in item.children" :index="child.path" v-if="!child.hidden && !child.leaf"  :key="child.path">
                        <i :class="child.meta.icon"></i>
                        <span>{{child.name}}</span>
                    </el-menu-item>
                </el-submenu>
             </template>
       </el-menu>
    </div>
</template>
<script>
export default {
    data(){
        return {
        }
    },
    computed:{
        routes() {
            return this.$router.options.routes
            console.log(routes)
        },
    },
}
</script>

4、路由配置（公共组件在头部引入，各模块组件按需引入）

import Vue from 'vue'
import Router from 'vue-router'
import LayOut from '@/components/common/LayOut'
import AppMain from '@/components/common/AppMain'
Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [{
      path: '/',
      hidden:true,//不在导航列表中显示
      component: LayOut,
      redirect: '/menu1', //当路由未匹配时重定向，可作初始化显示页面设置
    },
    {
      path: '/menu1',
      component: LayOut,
      name: 'menu1',
      leafThree:true,//有三级路由
      meta: {
        title: 'menu1',
        icon: 'fa fa-paper-plane'
      },
      children: [
            {
                path: '/menu1-1',
                name: 'menu1-1',
                meta: {
                    title: 'menu1-1',
                    icon: 'fa fa-paper-plane'
                },
                component:AppMain,
                leaf:true,//有二级路由
                children:[
                    {
                        path: '/menu1-1-1',
                        name: 'menu1-1-1',
                        meta: {
                            title: 'menu1-1-1',
                            icon: 'fa fa-paper-plane'
                        },
                        component: resolve => require(['@/components/viewers/menu1/menu1-1-1.vue'], resolve),
                    },
                    {
                        path: '/menu1-1-2',
                        name: 'menu1-1-2',
                        meta: {
                            title: 'menu1-1-2',
                            icon: 'fa fa-paper-plane'
                        },
                        component: resolve => require(['@/components/viewers/menu1/menu1-1-2.vue'], resolve),
                    },
                ]
            },
            {
                path: '/menu1-2',
                name: 'menu1-2',
                meta: {
                    title: 'menu1-2',
                    icon: 'fa fa-paper-plane'
                },
                component: resolve => require(['@/components/viewers/menu1/menu1-2.vue'], resolve),
            },
        ]
    },
    {
        path: '/menu2',
        component: LayOut,
        name: 'menu2',
        leaf:true,//有二级路由
        meta: {
          title: 'menu2',
          icon: 'fa fa-paper-plane'
        },
        children: [
              {
                  path: '/menu2-1',
                  name: 'menu2-1',
                  meta: {
                      title: 'menu2-1',
                      icon: 'fa fa-paper-plane'
                  },
                  component: resolve => require(['@/components/viewers/menu2/menu2-1.vue'], resolve),
              },
              {
                  path: '/menu2-2',
                  name: 'menu2-2',
                  meta: {
                      title: 'menu2-2',
                      icon: 'fa fa-paper-plane'
                  },
                  component: resolve => require(['@/components/viewers/menu2/menu2-2.vue'], resolve),
              },
        ]
    },
    {
        path: '/menu3',
        component: LayOut,
        name: 'menu3',
        redirect:'/menu3-1',
        meta: {
          title: 'menu3',
          icon: 'fa fa-paper-plane'
        },
        children: [
              {
                  path: '/menu3-1',
                  name: 'menu3-1',
                  meta: {
                      title: 'menu3-1',
                      icon: 'fa fa-paper-plane'
                  },
                  component: resolve => require(['@/components/viewers/menu3/menu3-1.vue'], resolve),
              },
        ]
    },
  ]
})

5、各模块组件这里不做介绍，根据需要写入内容，保持路由中引入正确即可

结果截图

（未对样式做调整，界面就这样凑合看看吧~~~~后续整完美）