这一篇继续记录生成测试页面、路由表、根据store中routes生成导航菜单。
1. 按照本测试项目左侧菜单结构在views目录下生成对应页面组件，同时在router/index.js中添加对应路由规则，路由表中meta用于后面生成菜单时的icon图标和权限控制，这里可以先不管。图中框起的监控总菜单为示例 页面菜单-views下页面组件-对应路由 3者间关系，“配置”总菜单类似。
2. 上面把测试页面都准备好了，现在处理根据路由表生成左侧菜单。
按照需不需要权限控制，把所有路由表分成2块：constantRoutes表示不需要权限控制能直接访问的页面（该测试项目只有/login不需要），asyncRoutes表示需要权限控制的页面（把/404和 * 两个路由放到数组最后）（操作之后只有/login能访问了，访问其他路由将是空白页）。并export暴露出去，使用vuex引入这两块路由，方便处理动态路由和生成动态菜单。这一步为了测试暂时把new VueRouter时挂载的routes为所有路由，Store中routes也为所有路由，后续将根据用户角色修改这2处。
3. 在之前创建的layout目录的SideBar组件中引用store中的routes，并生成需要的路由结构。
这一步涉及组件递归和点击跳转，在工作的项目中首次处理时没有思绪花费了大量时间，后续看网上各大神的文章慢慢领悟便有了自己的思路。根据路由处理成菜单有多种实现思路，这里只是简单的实现。
这里直接贴上菜单组件代码：
SideBar.vue:
<template>
<div class="side-bar-container">
<div class="logo-box">
<i class="el-icon-eleme" />
<span v-show="!isCollapse">Ele-admin</span>
</div>
<div class="collapse-icon">
<i
:class="[!isCollapse?'el-icon-s-fold':'el-icon-s-unfold']"
@click="handleToggleSideBar"
/>
</div>
<el-menu
background-color="#314151"
text-color="#adb3b9"
active-text-color="#fff"
class="el-menu-vertical"
:collapse="isCollapse"
:router="true"
:default-active="activeMenu"
:unique-opened="false"
>
<SideBarItem
v-for="item in routes"
:key="item.name"
:item="item"
:base-path="item.path"
/>
</el-menu>
</div>
</template>
<script>
import { mapState } from 'vuex'
import SideBarItem from './SideBarItem.vue'
export default {
components: {
SideBarItem
},
data() {
return {
}
},
computed: {
...mapState({
isCollapse: state => state.app.sideBarIsCollapse,
routes: state => state.routes
}),
activeMenu() {
const route = this.$route
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu
}
return path
}
},
methods: {
handleToggleSideBar() {
this.$store.commit('TOGGLE_SIDE_BAR')
},
}
}
</script>
<style lang="scss" scoped>
.side-bar-container{
height: 100%;
background-color: #314151;
.logo-box{
color: #fff;
font-size: 16px;
font-weight: bold;
height: 56px;
display: flex;
justify-content: center;
align-items: center;
i{
font-size: 26px;
}
span{
margin-left: 8px;
}
}
.collapse-icon{
color: #999;
background-color: #394c61;
padding: 8px;
display: flex;
justify-content: center;
i{
cursor: pointer;
}
}
.el-menu-vertical{
// height: 100%;
width: 100%;
border-right: none !important; // !!!!!!!!!!!!!!!!!!!!!!!!!!!!
.el-submenu .el-menu-item{
min-width: inherit !important;
}
}
}
</style>
SideBarItem.vue
<template>
<div class="">
<!-- route有children但是只需要显示一级的（如首页因为有layout需要children） -->
<template v-if="!item.hidden && item.meta.notShowChildren">
<MenuItem
:item="item"
:base-path="basePath"
/>
</template>
<el-submenu v-if="!item.hidden && ('children' in item) && !item.meta.notShowChildren" :index="item.path">
<!-- 含有子菜单项目的标题 -->
<template slot="title">
<i :class="[item.meta.icon]" />
<span slot="title">{{ item.name }}</span>
</template>
<!-- 子菜单下的每一小项目 且 该小项不含有children -->
<MenuItem
v-for="sonItem in item.children.filter(son=>!('children' in son))"
:key="sonItem.name"
:item="sonItem"
:base-path="basePath"
/>
<!-- 子菜单下的小项还有嵌套children -->
<template v-if="item.children.some(son=>'children' in son)">
<SideBarItem
v-for="sonItem in item.children.filter(son=>'children' in son)"
:key="sonItem.name"
:item="sonItem"
:base-path="basePath+'/'+sonItem.path"
/>
</template>
</el-submenu>
</div>
</template>
<script>
import MenuItem from './MenuItem.vue'
import SideBarItem from './SideBarItem.vue'
export default {
name: 'SideBarItem',
components: {
SideBarItem,
MenuItem
},
props: ['item', 'basePath']
}
</script>
<style>
</style>
MenuItem.vue
<template>
<el-menu-item v-if="!item.hidden" :index="item.path=='/'?'/':basePath+'/'+item.path">
<i :class="[item.meta.icon]" />
<span slot="title">{{ item.name }}</span>
</el-menu-item>
</template>
<script>
export default {
props: ['item', 'basePath']
}
</script>
<style>
</style>
这里需要注意的有下面几点：
<el-menu 组件中
:router="true"启用vue-router模式点击就能导航。需要结合 <el-menu 组件的:index属性绑定为路由path
:default-active="activeMenu"处理菜单高亮，直接用当前路由path；但是像/device/detail这类子页面因为路由表添加了hidden属性，并没有渲染到菜单栏中，所以用meta中的activeMenu属性(值为父级路由path)进行处理
<SideBarItem中
:base-path="item.path" 该组件递归，base-path表示当前层的路由path
-
递归的组件需要添加 name 属性，平时写组件时应该养成写name的习惯
递归组件必须添加 name.png <Menu-item组件中
:index="item.path=='/'?'/':basePath+'/'+item.path" 组件递归时，上级路由path+本级路由path；导致根路由/多次添加变成“///”所以这里进行判断处理
之后便能根据store中的routes循环生成多层次的导航菜单。
下篇文章继续记录用户登录拿到token和roles来过滤routes动态生成菜单，并添加permission.js用router.beforeEach拦截处理路由权限。
