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

在原生前端项目中使用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 对其方式

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