vue+iview-admin 利用适配器模式改造eova(伊娃管理后台)菜单及路由(1)
简单效果展示
改造完后效果
eova 及 iview的部署
略(日后再补充)
菜单功能核心改造
- 优化
iview/src/router/router.js
import Main from '@/views/Main.vue';...import jquery from 'jquery';//引入jquery用于同步请求菜单栏import Kit from '../libs/kit.js';//引入自定义适配器类...// 通过请求/menu接口获取eova菜单结构let raw = jquery.ajax({ url: '/menu', type: 'GET', //GET async: false, //或false,是否异步 dataType: 'json',}).responseJSON;// 通过适配器将eova菜单变为适合vue-router的结构const menu = Kit.adaptMenu(raw, Main);// 作为Main组件的子页面展示并且在左侧菜单显示的路由写在appRouter里export const appRouter = [...menu];// 所有上面定义的路由都要写在下面的routers里export const routers = [ loginRouter, otherRouter, preview, locking, ...appRouter,//引入路由 page500, page403, page404];复制代码 - 添加
iview/src/libs/kit.js用于适配菜单
let Kit = {};...import webComponent from '@/views/main-components/web.vue';//引入用于读取页面iframe的组件Kit.adaptMenu = (raw, Main) => { let menu = []; const rawMenu = raw; raw.forEach((item, index) => { //主菜单 if (item.parent_id == 0 && item.type == 'dir') {//判断是否根目录及父目录 let m = {}; m.id = item.id; m.path = "/" + item.code; m.meta = { type: 'dir' } m.name = item.code; m.title = item.name; m.component = Main;//使用父菜单组件 m.icon = 'folder'; function addChildren(parent) {//通过递归调用添加子菜单在每个菜单的children属性内 parent.children = []; // 直接打开链接 let children = rawMenu.filter(child => child.parent_id == parent.id && (child.link || child.type == 'dir')); if (children.length > 0) { children.forEach((child, index) => { let c = {}; c.id = child.id; c.path = "/" + child.code; c.name = child.code; c.title = child.name; c.meta = {//利用meta将链接信息传给路由 type: child.type, link: "" + child.link }; c.component = webComponent; parent.children.push(c); addChildren(c); }) } } addChildren(m); menu.push(m); } else if (item.parent_id == 0 && item.type == 'diy') {//如果是自定义菜单,直接跳转 let m = {}; m.id = item.id; m.path = "/" + item.code; m.meta = { type: item.type, link: item.link } m.name = item.code; m.title = item.name; m.component = Main; m.icon = 'folder'; m.children = []; menu.push(m); } }) return menu;}export default Kit;复制代码 - 添加
iview/src/views/main-components/web.vue用于打开iframe页面
复制代码
改造完成
源码请参考