实现读取路由json文件渲染菜单前端javascript

在原生前端项目中使用json文件配置路由的方式，修改菜单跳转的链接就会比较方便，下面我们就来实现一下：
使用layui-nav导航组件为例，结构分为一级二级菜单，顶部导航是一级，左侧栏菜单为二级菜单，使用iframe来当做路由的视图，页面结构：

a

在当前目录创建一个菜单路由表menu.json，内容如下：

[ { "caption": "菜单1", "href": "../org/org.html", "default": "layui-this" }, { "caption": "用户管理", "href": "../user/user.html" }, { "caption": "xx管理" }, { "caption": "权限管理", "children": [ { "caption": "岗位设置", "href": "../system/position/position.html" }, { "caption": "模块管理", "href": "../system/log/log.html?type=16" } ] }, { "caption": "系统配置", "align": "right", "children": [ { "caption": "操作日志", "href": "../system/log/log.html?type=4" }, { "caption": "登录日志", "href": "../system/log/log.html?type=8" } ] } ]

caption 为对应菜单的文本，href对应菜单需要跳转的地址，children子菜单,default 是否默认选中，align 对其方式
【实现读取路由json文件渲染菜单】menuRender.js

"use strict"; /** * menuRender.js 读取菜单json并渲染 * */function hideSideMenuLeft() { $(".layui-side").hide(); $(".layui-body").css("left", "0px"); }; hideSideMenuLeft(); function showSideMenuLeft() { $(".layui-body").css("left", "20rem"); $(".layui-side").show(); }function renderLeftMenu(meunItemArr) { var meunLeftItemArr = []; meunItemArr.forEach(function (left_item, idx_l) { var $menuItem = $( '' + (left_item.caption || "") + '' ); $menuItem.click(function(){ $(this).parent().find('.layui-this').removeClass('layui-this'); $(this).addClass('layui-this'); $("#appContent").attr("src", $(this).find('a').attr("data-url")); }) meunLeftItemArr.push($menuItem); }); $("#menu-list-left").empty().append(meunLeftItemArr); } $.getJSON("menu.json", function (data) { //获取json内容并遍历开始渲染一级菜单 var meunTopItemArr = []; data.forEach(function (top_item, idx) { var $menuItem = $( '' + (top_item.caption || "") + '' ); if (top_item.children && top_item.children.length) { $menuItem.data("children", top_item.children); if (top_item.default === "layui-this") { //如果当前默认的菜单有二级菜单需要渲染 renderLeftMenu(top_item.children); showSideMenuLeft(); } } else { $menuItem.data("children", []); } //一级菜单绑定事件和渲染 $menuItem.click(function () { var thisChild = $(this).data("children"); if (thisChild.length) { renderLeftMenu(thisChild); showSideMenuLeft(); } else { hideSideMenuLeft(); } $("#appContent").attr("src", $(this).find('a').attr("data-url")); }); meunTopItemArr.push($menuItem); }); $("#menu-list").append(meunTopItemArr); }); $("#appContent").attr("src", "../org/org.html");