ElementUI 复杂顶部和左侧导航栏实现⽰例描述：如图
项⽬路径如下图所⽰：
代码实现：
⾸先在store.js中添加两个状态：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
topNavState: 'home',
leftNavState: 'home'
}
export default new Vuex.Store({
state
})
App.vue内容：
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
main.js代码：
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import store from './store.js'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/iconfont.css'
import '@/assets/css/style.css'
Vue.use(ElementUI)
new Vue({
router,
store,
el: '#app',
render: h => h(App)
})
router/index.js⽂件声明路由：
其中：⾏程计划、任务、通讯录属于⾸页⼤板块（topNavState=“home”）；企业信息、车辆信息、部门信息都属于enterprise这⼀⼤板块（topNavState=“enterprise”）
import Vue from 'vue'
import Router from 'vue-router'
import LeftNav from '@/components/nav/leftNav.vue'
import Home from '@/views/home.vue'
import Dashboard from '@/views/workbench/dashboard.vue'
import Mission from '@/views/workbench/mission/mission.vue'
import Plan from '@/views/workbench/plan.vue'
import Maillist from '@/views/workbench/maillist.vue'
import EnterpriseList from '@/views/enterprise/index.vue'
import EnterpriseAdd from '@/views/enterprise/add.vue'
import EnterpriseDetail from '@/views/enterprise/detail.vue'
import EnterpriseValidate from '@/views/enterprise/validate.vue'
import VehicleManage from '@/views/vehicle/index.vue'
import DeptManager from '@/views/dept/index.vue'
import NotFound from '@/components/404.vue'
/
/ 懒加载⽅式，当路由被访问的时候才加载对应组件
const Login = resolve => require(['@/views/login'], resolve)
Vue.use(Router)
let router = new Router({
routes: [
{
path: '/login',
type: 'login',
component: Login
},
{
path: '*',
component: NotFound
},
{
path: '/',
type: 'home', // 根据type区分不同模块（顶部导航）
name: 'home', // 根据name区分不同⼦模块（左侧导航）
redirect: '/dashboard',
component: Home,
menuShow: true,
children: [
{
导航菜单path: '/dashboard',
component: LeftNav,
name: 'dashboard', // 当前路由的name
leaf: true, // 只有⼀个节点
iconCls: 'iconfont icon-home', // 图标样式class
menuShow: true,
children: [
{ path: '/dashboard', component: Dashboard, name: '⾸页', menuShow: true }
]
},
path: '/mySet',
component: LeftNav,
name: '我的设置',
iconCls: 'el-icon-menu',
menuShow: true,
children: [
{ path: '/mySet/plan', component: Plan, name: '⾏程计划', menuShow: true },
{ path: '/mySet/mission', component: Mission, name: '我的任务', menuShow: true },
{ path: '/mySet/maillist', component: Maillist, name: '通讯录', menuShow: true }
]
}
]
},
{
path: '/enterpriseManager',
type: 'enterprise',
name: 'enterprise',
component: Home,
redirect: '/enterprise/list',
menuShow: true,
children: [
{
path: '/enterpriseList',
component: LeftNav,
name: 'enterpriseList',
leaf: true, // 只有⼀个节点
iconCls: 'iconfont icon-home', // 图标样式class
menuShow: true,
children: [
{ path: '/enterprise/list', component: EnterpriseList, name: '企业列表', menuShow: true },
{ path: '/enterprise/detail', component: EnterpriseDetail, name: '企业详情', menuShow: false }
]
},
{
path: '/enterpriseAdd',
component: LeftNav,
name: 'enterpriseAdd',
leaf: true, // 只有⼀个节点
iconCls: 'el-icon-menu',
menuShow: true,
children: [
{ path: '/enterprise/add', component: EnterpriseAdd, name: '企业添加', menuShow: true }
]
},
{
path: '/enterpriseValidate',
component: LeftNav,
name: 'enterpriseValidate',
leaf: true, // 只有⼀个节点
iconCls: 'el-icon-menu',
menuShow: true,
children: [
{ path: '/enterprise/validate', component: EnterpriseValidate, name: '企业认证', menuShow: true }          ]
}
]
},
{
path: '/vehicleManager',
type: 'enterprise',
name: 'vehicle',
component: Home,
redirect: '/vehicle/list',
menuShow: true,
children: [
{
path: '/vehicleList',
component: LeftNav,
name: 'vehicleList',
leaf: true, // 只有⼀个节点
iconCls: 'iconfont icon-home', // 图标样式class
menuShow: true,
children: [
{ path: '/vehicle/list', component: VehicleManage, name: '车辆信息', menuShow: true }
]
}
]
},
{
path: '/deptManager',
type: 'enterprise',
name: 'dept',
component: Home,
redirect: '/dept/list',
menuShow: true,
path: '/deptList',
component: LeftNav,
name: 'deptList',
leaf: true, // 只有⼀个节点
iconCls: 'iconfont icon-home', // 图标样式class
menuShow: true,
children: [
{ path: '/dept/list', component: DeptManager, name: '部门信息', menuShow: true }
]
}
]
}
]
});
router.beforeEach((to, from, next) => {
// console.log('to:' + to.path)
if (to.path.startsWith('/login')) {
veItem('access-user')
next()
} else if(to.path.startsWith('/register')){
veItem('access-user')
next()
} else {
let user = JSON.parse(Item('access-user'))
if (!user) {
next({path: '/login'})
} else {
next()
}
}
});
export default router
特别说明：
这⾥的路由对象router ，设置的是最多三级，⼀级路由主要对应的是顶部导航和其他⽆⼦页⾯的路由，⼆级和三级路由分别对应的是左侧导航的⼀级和⼆级菜单（⽐如三级路由对应的就是左侧导航的⼆级菜单），⼆级路由设置leaf属性，值为true表明该路由下没有⼦菜单（如果该路
由下的某页⾯不显⽰在左侧导航，不算⼦菜单）。
leftNav.vue⽂件中主要是左侧导航菜单加载代码：
<template>
<el-col :span="24" class="main">
<!--左侧导航-->
<aside :class="{showSidebar:!collapsed}">
<!--展开折叠开关-->
<div class="menu-toggle" @click.prevent="collapse">
<i class="iconfont icon-outdent" v-show="!collapsed" title="收起"></i>
<i class="iconfont icon-indent" v-show="collapsed" title="展开"></i>
</div>
<!--导航菜单-->
<el-menu :default-active="$route.path" router :collapse="collapsed" ref="leftNavigation">
<template v-for="(issue,index) in $utes">
<template v-if="issue.name === $store.state.leftNavState"><!-- 注意：这⾥就是leftNavState状态作⽤之处，当该值与router的根路由的name相等时加载相应菜单组 -->            <template v-for="(item,index) in issue.children">
<el-submenu v-if="!item.leaf" :index="index+''" v-show="uShow">
<template slot="title"><i :class="item.iconCls"></i><span slot="title">{{item.name}}</span></template>
<el-menu-item v-for="term in item.children" :key="term.path" :index="term.path" v-if="uShow"
:class="$route.path==term.path?'is-active':''">
<i :class="term.iconCls"></i><span slot="title">{{term.name}}</span>
</el-menu-item>
</el-submenu>
<el-menu-item v-else-if="item.leaf&&item.children&&item.children.length" :index="item.children[0].path"
:class="$route.path==item.children[0].path?'is-active':''" v-show="uShow">
<i :class="item.iconCls"></i><span slot="title">{{item.children[0].name}}</span>
</el-menu-item>
</template>
</template>
</template>
</el-menu>
</aside>
<!--右侧内容区-->
<section class="content-container">
<div class="grid-content bg-purple-light">
<el-col :span="24" class="content-wrapper">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</el-col>
</div>
</template>
<script>
export default {
name: 'leftNav',
data () {
return {
collapsed: false
}
},
methods: {
//折叠导航栏
collapse: function () {
},
// 左侧导航栏根据当前路径默认打开⼦菜单（如果当前路由是三级，则⽗级⼦菜单默认打开）
defaultLeftNavOpened () {
let cur_path = this.$route.path; //获取当前路由
let routers = this.$utes; // 获取路由对象
let subMenuIndex = 0, needOpenSubmenu = false;
for (let i = 0; i < routers.length; i++) {
let children = routers[i].children;
if(children){
for (let j = 0; j < children.length; j++) {
if (children[j].path === cur_path) {
break;
}
/
/ 如果该菜单下有⼦菜单(个数>1且设置的leaf为false才有下拉⼦菜单)
if(children[j].children && !children[j].leaf) {
let grandChildren = children[j].children;
for(let z=0; z<grandChildren.length; z++) {
if(grandChildren[z].path === cur_path) {
subMenuIndex = j;
needOpenSubmenu = true;
break;
}
}
}
}
}
}
if(this.$refs['leftNavigation'] && needOpenSubmenu) {
this.$refs['leftNavigation'].open(subMenuIndex); // 打开⼦菜单
}
},
},
mounted() {
this.defaultLeftNavOpened();
}
}
</script>
home.vue是后台主页组件代码
<template>
<el-row class="container">
<!--头部-->
<el-col :span="24" class="topbar-wrap">
<div class="topbar-logo topbar-btn">
<a href="/" rel="external nofollow"  rel="external nofollow" ><img src="../assets/logo.png" ></a>
</div>
<div class="topbar-logos" v-show="!collapsed">
<a href="/" rel="external nofollow"  rel="external nofollow"  >车车综合管理</a>
</div>
<div class="topbar-title">
<el-row v-show="$pNavState==='home'"><!-- 注意：这⾥就是topNavState作⽤之处，根据当前路由所在根路由的type值判断显⽰不同顶部导航菜单 -->          <el-col :span="24">
<el-menu :default-active="defaultActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true">
<el-menu-item index="/">⼯作台</el-menu-item>
<el-menu-item index="/enterpriseManager">企业管理</el-menu-item>
<el-menu-item index="/orderManager">订单管理</el-menu-item>
<el-menu-item index="/systemManager">系统管理</el-menu-item>
</el-menu>
</el-col>
</el-row>
<el-row v-show="$pNavState==='enterprise'">
<el-col :span="24">
<el-menu :default-active="defaultActiveIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true">
<el-menu-item index="/enterpriseManager">企业信息</el-menu-item>
<el-menu-item index="/vehicleManager">车辆信息</el-menu-item>
<el-menu-item index="/deptManager">组织架构</el-menu-item>
</el-menu>
</el-col>
</el-row>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。