实现读取路由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");