Vue管理后台由角色动态生成路由及菜单（3）- 路由表生成左侧导航菜单

这一篇继续记录生成测试页面、路由表、根据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，并生成需要的路由结构。

这一步涉及组件递归和点击跳转，在工作的项目中首次处理时没有思绪花费了大量时间，后续看网上各大神的文章慢慢领悟便有了自己的思路。根据路由处理成菜单有多种实现思路，这里只是简单的实现。

这里直接贴上菜单组件代码：

这里需要注意的有下面几点：

• <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的习惯

• <Menu-item组件

• :index="item.path=='/'?'/':basePath+'/'+item.path"   组件递归时，上级路由path+本级路由path；导致根路由/多次添加变成“///”所以这里进行判断处理

之后便能根据store中的routes循环生成多层次的导航菜单。

下篇文章继续记录用户登录拿到token和roles来过滤routes动态生成菜单，并添加permission.js用router.beforeEach拦截处理路由权限。