配置静态导航
- nav.vue
<template>
<div>
<breadcrumb @changeActive="changeCurActive" />
<el-container>
<el-aside class="bg-color1 left">
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
@select="handleSelect"
>
<template v-for="( item, index1) in routeList">
<template v-if="item.isShowInNav">
<barItem :item="item" />
</template>
</template>
</el-menu>
</el-aside>
<el-container class="bg-color1">
<transition name="fade" mode="out-in">
<router-view />
</transition>
</el-container>
</el-container>
</div>
</template>
<script>
import breadcrumb from './components/breadCrumb'
import barItem from './components/barItem'
export default {
name: 'Layout',
components: {
breadcrumb, barItem
},
data() {
return {
routeList: []
}
},
computed: {
},
created() {
this.routeList = this.$router.options.routes
},
methods: {
handleSelect(key, keyPath) {
if (key.includes('/')) {
this.$router.push(key)
}
},
changeCurActive(item) {
this.curActive = item
}
}
}
</script>
<style lang='scss'>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
.bg-color1 {
background:#43bbbb;
}
.left{margin-right:10px;}
.el-breadcrumb{
margin-bottom: 15px;
}
.fade-enter {
opacity:0;
}
.fade-leave{
opacity:1;
}
.fade-enter-active{
transition:opacity .3s;
}
.fade-leave-active{
opacity:0;
transition:opacity .3s;
}
</style>
- item.vue
<template>
<div>
<template v-if="onlyOne(item)">
<el-menu-item :index="item.children[0].path">
<span :class="['iconfont','icon-'+item.children[0].meta.icon]" />
<span slot="title">{{ item.children[0].meta.title }}</span>
</el-menu-item>
</template>
<template v-else>
<el-submenu index="index">
<template slot="title">
<i :class="['iconfont','icon-'+item.meta.icon]" />
<span>{{ item.meta.title }}</span>
</template>
<template v-for="child in item.children">
<el-menu-item :index="child.path">
<span slot="title">{{ child.meta.title }}</span>
</el-menu-item>
</template>
</el-submenu>
</template>
</div>
</template>
<script>
export default {
components: {
},
props: ['item'],
data() {
return {
}
},
methods: {
onlyOne(item) {
if (item.children && item.children.length === 1) {
return true
}
return false
}
}
}
</script>
<style scoped>
.iconfont{margin-right: 10px;}
</style>
