本站整理下载：

 

相关截图：

 

主要内容：

通过菜单管理统一管理访问路由，自动映射对应文件目录[ src/views/modules/... ]组件。功能实现通过拦截路由进行逻辑判断处理。 值为 /sys/user 自动映射对应文件目录为 src/views/modules/[sys/user.vue] 文件 值项为 /job/schedule 自动映射对应文件目录为 src/views/modules/[job/schedule.vue] 文件 值项为 http://fast.demo.renren.io/ 自动使用iframe访问 http://fast.demo.renren.io/ 地址，也就是说只要是以http[s]?://开头时，都通过iframe访 只 问地址 问 ，不再自动映射 所有的动态菜单路由都会保存在 sessionStorage['dynamicMenuRoutes'] 属性中，同时输出在浏览器控制台 !<-------------------- 动态(菜单)路由 s --------------------> 数据对象 !<-------------------- 动态(菜单)路由 s --------------------> 1. 先查看 dynamicMenuRoutes 每一项中的 meta: { iframeUrl: '' } 属性，如果 iframeUrl === '' ，那么就会自动映射对应文件目录。如 果 iframeUrl !== '' 就会通过iframe访问地址，无需查看第二步。 2. 再查看 dynamicMenuRoutes 每一项中的 component: null 属性，如果 component === null ，那么就是自动映射对应文件目录 失败 。如 果 component !== null 自动映射对应文件目录 成功 。 对应代码在 src/router/index.js router.beforeEach((to, from, next) => { // 添加动态(菜单)路由 // 1. 已经添加 or 全局路由, 直接访问 // 2. 获取菜单列表, 添加并保存本地存储 if (router.options.isAddDynamicMenuRoutes || fnCurrentRouteType(to) === 'global') { next() } else { http({ url: http.adornUrl('/sys/menu/nav'), method: 'get', params: http.adornParams() }).then(({data}) => { if (data && data.code === 0) { fnAddDynamicMenuRoutes(data.menuList) router.options.isAddDynamicMenuRoutes = true sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]')) sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]')) next({ ...to, replace: true }) } else { sessionStorage.setItem('menuList', '[]') sessionStorage.setItem('permissions', '[]') next() }}) }}) /*** 判断当前路由类型, global: 全局路由, main: 主入口路由 * @param {*} route 当前路由 */ function fnCurrentRouteType (route) { var temp = [] for (var i = 0; i < globalRoutes.length; i++) { if (route.path === globalRoutes[i].path) { return 'global' } else if (globalRoutes[i].children && globalRoutes[i].children.length >= 1) { Dynamic-menu-routes D动