关于前端:实现读取路由json文件渲染菜单

在原生前端我的项目中应用 json 文件配置路由的形式，批改菜单跳转的链接就会比拟不便，上面咱们就来实现一下：

应用 layui-nav 导航组件为例，构造分为一级二级菜单，顶部导航是一级，左侧栏菜单为二级菜单，应用 iframe 来当做路由的视图，页面构造：

     <div class="nav-header">
              <ul class="layui-nav" id="menu-list">
              </ul>  
     </div>a

  <!-- 左侧导航区域 -->
            <div class="layui-side">
           <ul class="layui-nav layui-nav-tree" id="menu-list-left">
     </ul>
        </div>

            <div class="layui-body">
 <!-- 内容主体区域 -->
                <iframe id="appContent" name="home" src=""width="100%"height="100%"frameborder="0"scrolling="no"></iframe>
            </div>

在当前目录创立一个菜单路由表 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 对其形式

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 = $(
      '<li class="layui-nav-item "><a data-url="' +
        (left_item.href || "") +'">' +
        (left_item.caption || "") +'</a></li>'
    );
    $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 = $(
      '<li class="layui-nav-item ' +
        (top_item.default || "") +" " +
        (top_item.align || "") +'"><a data-url="' +
        (top_item.href || "") +'">' +
        (top_item.caption || "") +'</a></li>'
    );

    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");