不同角色有不同的权限，这时如果管理平台的菜单定义在代码里，显然是不能满足上面的需求，我们就需要后台提供用户菜单，然后前台动态生成路由。
1 动态添加路由
利用 vue-router 的 addRoutes 方法可以动态添加路由。请求接口返回菜单格式如下
[ { "id":"1332194352530083842", "pid":"1331859957655007233", "name":"TspUser", "component":"user/tspuser/index", "redirect":null, "meta":{ "title":"用户信息 ", "icon":"pic-right", "show":true, "target":null, "link":null }, "path":"/user", "hidden":false }, { "id":"1334396728339042306", "pid":"1333592942347546625", "name":"Product", "component":"fota/product/index", "redirect":null, "meta":{ "title":"产品信息", "icon":"pic-right", "show":true, "target":null, "link":null }, "path":"/product", "hidden":false } ]
复制
path是地址栏显示路径，component是这个菜单对应的文件地址。这里返回的结构并没有按照树型返回，都是平级，所以前台需要重新梳理关系。定义一个方法
routerPackag(routers) { let accessedRouters = routers.filter(router => { if (router.component === "Layout") { // Layout组件特殊处理 router.component = Layout; } else { //处理组件---重点 router.component = this.loadView(router.component); } //存在子集 if (router.children && router.children.length) { router.children = this.routerPackag(router.children); } return true; }); return accessedRouters; }, loadView(view) { // 路由懒加载 return () => import(`@/${view}`); },
复制
这个方法就是把平级的处理成正确的父子级，同时路由懒加载。
2 生成菜单
后台提供的菜单数据需要前台身体生成菜单树。
<a-layout-sider :class="themeStyle == 'light'?'rightbg':'darkbg'" :trigger="null" collapsible v-model="collapsed" > <div :class="themeStyle == 'light'?'rightlogo':'darklogo'"> <img class="l-logo" v-show="collapsed" src="../assets/logo.png" a <span v-show="!collapsed">管理平台</span> </div> <a-menu mode="inline" :theme="themeStyle" :openKeys="openKeys" @click="selectItem" :selectedKeys="[$route.path]" @openChange="onOpenChange" > <a-sub-menu v-for="item in menu" :key="item.id"> <span slot="title"> <i class="iconfont" :class="item.icon"></i> <span v-show="!collapsed"> {{lang == "cn" ? item.name : lang == "en" ? item.nameEnUS : lang == "tw" ? item.nameZhTW : item.nameJA}} </span> </span> <a-menu-item v-for="childrenitem in item.children" :key="childrenitem.showPath" @click="titleClick(item,childrenitem)" > <i class="iconfont" :class="childrenitem.icon"></i> <span> {{lang == "cn" ? childrenitem.name : lang == "en" ? childrenitem.nameEnUS : lang == "tw" ? childrenitem.nameZhTW : childrenitem.nameJA}} </span> </a-menu-item> </a-sub-menu> </a-menu> </a-layout-sider>
复制
上述功能已经在开源的管理平台实现，地址如下， 有兴趣的可以clone。
