element UI 多级路由导航
最终实现：
1.路由
index.js文件，在大项目中我们将每个层级的路由拆分成多个文件，在主路由router/index.js中引用。
import Vue from 'vue'
import Router from 'vue-router'
import index1 from './modules/index1'
import index2 from './modules/index2'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Index',
meta: {title: 'Index'},
component: resolve => (require(['../components/index.vue'], resolve)),
redirect: '/HelloWorld',
children: [
index1,
index2
]
}
]
})
modules/index1.js文件
import HelloWorld from '../../components/HelloWorld.vue'
const index1 = {
path: '/HelloWorld',
name: 'copeCenterRouter',
redirect: '/HelloWorld',
component: HelloWorld,
meta: {title: '一级标题', icon: 'testCenter'},
children: [{
path: '/HelloWorld',
name: 'JobTitleManagement',
meta: {title: '二级标题'},
component: HelloWorld,
},{
path: '/HelloWorld',
hidden: true,
name: 'ApplyCreate',
meta: {title: '二级标题'},
component: HelloWorld,
},{
path: '/HelloWorld',
hidden: true,
name: 'ApplyEdit',
meta: {title: '二级标题'},
component: HelloWorld,
},{
path: '/HelloWorld',
hidden: true,
name: 'ApplyDetails',
meta: {title: '二级标题'},
component: HelloWorld,
},{
path: '/HelloWorld',
name: 'SelfAssessmentEdit',
hidden: true,
meta: {
title: '二级标题'
},
component: HelloWorld,
},{
path: '/HelloWorld',
name: 'SelfAssessmentDetails',
hidden: true,
meta: {
title: '二级标题'
},
component: HelloWorld,
},
]
}
export default index1
modules/index2.js文件
import HelloWorld from '../../components/HelloWorld.vue'
const index2 = {
path: '/HelloWorld',
name: 'CompanyInfo',
redirect: '/HelloWorld',
component: HelloWorld,
meta: {title: '一级标题', icon: 'enterpriseCenter'},
children: [
{
path: '/HelloWorld',
name: 'MyBusiness',
redirect: '/HelloWorld',
component: HelloWorld,
meta: {title: '二级标题'},
children: [
{
path: '/HelloWorld',
name: 'CompanyInfo',
meta: {title: '三级标题'},
component: HelloWorld,
}, {
path: '/HelloWorld',
name: 'QualificationCertificate',
meta: {title: '三级标题'},
component: HelloWorld,
}
]
},
{
path: '/HelloWorld',
name: 'Pool',
redirect: '/HelloWorld',
component: HelloWorld,
meta: {title: '二级标题'},
children: [
{
path: '/HelloWorld',
name: 'MyRecruitment',
meta: {title: '三级标题'},
component: HelloWorld,
children: [
{
path: '/HelloWorld',
name: 'MyRecruitment',
meta: {title: '四级标题'},
component: HelloWorld,
}, {
path: '/HelloWorld',
name: 'EnterprisePost',
hidden: true,
meta: {title: '四级标题' },
component: HelloWorld,
}
]
}, {
path: '/HelloWorld',
name: 'EnterprisePost',
hidden: true,
meta: {title: '三级标题' },
component: HelloWorld,
}
]
}
]
}
export default index2
2.组件
index.vue 文件，父组件。
<template>
<div class="index-box">
<div class="main-list">
<el-menu :default-active="$route.name" class="el-menu-vertical-demo" unique-opened active-text-color="#4A87FF" router>
<navBar :list="routeData"></navBar>
</el-menu>
</div>
</div>
</template>
<script>
import navBar from './navBar.vue'
import { UnNullArray } from './tool'
import Roouter from '@/router/index'
export default {
name: 'Index',
components: {navBar},
data() {
return {
routeData: [],
defaultOpeneds: [0]
}
},
created() {
let routes = Roouter.options.routes
if (!UnNullArray(routes)) {
return false
}
this.routeData = routes[0].children.map(item => {
item.isRoot = true
return item
})
}
}
</script>
<style>
.main-list{
width: 200px;
}
</style>
navbar.vue 文件，子组件
<template>
<div>
<div v-for="item in list">
<div :style="{backgroundColor: item.isRoot ? '' : '#fafafa'}">
<div v-if="item.children && item.children.length > 0">
<el-submenu :index="item.name" :key="item.name" v-if="!item.hidden">
<template slot="title">
<i class="el-icon-menu"></i>
<span>{{ item.meta.title }}</span>
</template>
<template>
<nav-bar :list="item.children"></nav-bar>
</template>
</el-submenu>
</div>
<div v-else>
<el-menu-item v-if="!item.hidden" :index="item.name" :key="item.name"
@click="goToPage({ name: item.name, data: {} })">
<template>
<!-- <i class="el-icon-menu"></i> -->
<span>{{ item.meta.title }}</span>
</template>
</el-menu-item>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'navBar',
props: ['list'],
methods: {
/** 路由跳转 ***/
goToPage({ name, data }) {
this.$router.push({ name: name })
}
}
}
</script>
HelloWorld.vue 文件
<template>
<div>helloworld</div>
</template>
<script>
export default {
name: '',
data() {
return {}
},
created() {},
methods: {}
}
</script>
<style></style>
tool.js 文件
/** 判断数组是否为空，长度是否等于0 **/
export function UnNullArray (array) {
if (!array) {
return false
}
if (array.length === 0) {
return false
}
return true
}
