vue 动态多级导航菜单

1，创建vue的左侧导航栏组件

2，引用

 
            
          
 
import NavMenu from "./NavMenu";
 
  components: {
    NavMenu
  },
  data(){
	  return{
	   isCollapse:false,
	  }
  }

3,数据列表

[{
	"adminMenu": {
		"id": 70,
		"menuName": "客户管理",
		"menuType": "page",
		"pid": "0",
		"path": "/customer",
		"icon": null,
		"sort": 1,
		"deep": 1,
		"code": "customer.user.view",
		"resource": "customer.user.view"
	},
	"children": []
}, {
	"adminMenu": {
		"id": 99,
		"menuName": "统计报表",
		"menuType": "list",
		"pid": "0",
		"path": "#",
		"icon": null,
		"sort": 7,
		"deep": 1,
		"code": "statistics",
		"resource": "statistics"
	},
	"children": [{
		"adminMenu": {
			"id": 109,
			"menuName": "产品运营总览中心",
			"menuType": "page",
			"pid": "99",
			"path": "/statistics/core",
			"icon": null,
			"sort": 1,
			"deep": 2,
			"code": "statistics.core",
			"resource": "statistics.core"
		},
		"children": []
	}, {
		"adminMenu": {
			"id": 123,
			"menuName": "运营报表",
			"menuType": "list",
			"pid": "99",
			"path": "#",
			"icon": null,
			"sort": 2,
			"deep": 2,
			"code": "statistics.yyyw",
			"resource": "statistics.yyyw"
		},
		"children": [{
			"adminMenu": {
				"id": 124,
				"menuName": "运营业务报表",
				"menuType": "page",
				"pid": "123",
				"path": "/tjbb/Operaional",
				"icon": null,
				"sort": 5,
				"deep": 3,
				"code": "statistics.yunying",
				"resource": "statistics.yunying"
			},
			"children": []
		}]
	}, {
		"adminMenu": {
			"id": 115,
			"menuName": "贷后管理报表",
			"menuType": "list",
			"pid": "99",
			"path": "#",
			"icon": null,
			"sort": 3,
			"deep": 2,
			"code": "poi",
			"resource": "poi"
		},
		"children": [{
			"adminMenu": {
				"id": 116,
				"menuName": "风险总览样表",
				"menuType": "page",
				"pid": "115",
				"path": "/tjbb/riskbb",
				"icon": null,
				"sort": 1,
				"deep": 3,
				"code": "statistics.risk",
				"resource": "statistics.risk"
			},
			"children": []
		}, {
			"adminMenu": {
				"id": 117,
				"menuName": "催收报表",
				"menuType": "page",
				"pid": "115",
				"path": "/tjbb/csbb",
				"icon": null,
				"sort": 2,
				"deep": 3,
				"code": "statistics.dun",
				"resource": "statistics.dun"
			},
			"children": []
		}, {
			"adminMenu": {
				"id": 118,
				"menuName": "首贷续贷入催率和回收率",
				"menuType": "page",
				"pid": "115",
				"path": "/tjbb/jinandchu",
				"icon": null,
				"sort": 4,
				"deep": 3,
				"code": "statistics.poi",
				"resource": "statistics.poi"
			},
			"children": []
		}, {
			"adminMenu": {
				"id": 119,
				"menuName": "7日内提前还款报表",
				"menuType": "page",
				"pid": "115",
				"path": "/tjbb/day7",
				"icon": null,
				"sort": 5,
				"deep": 3,
				"code": "statistics.poi.seven",
				"resource": "statistics.poi.seven"
			},
			"children": []
		}]
	}, {
		"adminMenu": {
			"id": 110,
			"menuName": "第三方统计",
			"menuType": "list",
			"pid": "99",
			"path": "#",
			"icon": null,
			"sort": 4,
			"deep": 2,
			"code": "statistics.third",
			"resource": "statistics.third"
		},
		"children": [{
			"adminMenu": {
				"id": 111,
				"menuName": "Advance AI",
				"menuType": "page",
				"pid": "110",
				"path": "/statistics/third",
				"icon": null,
				"sort": 1,
				"deep": 3,
				"code": "statistics.third.advanceai",
				"resource": "statistics.third.advanceai"
			},
			"children": []
		}]
	}, {
		"adminMenu": {
			"id": 100,
			"menuName": "渠道数据",
			"menuType": "page",
			"pid": "99",
			"path": "/statistics/channel",
			"icon": null,
			"sort": 5,
			"deep": 2,
			"code": "statistics.channel",
			"resource": "statistics.channel"
		},
		"children": []
	}]
}]