导航无限级菜单 java,Element NavMenu 无限级菜单

数据结构

menudata.json

{"data":[

{

"id": 1,

"path": "/home",

"menuName": "商业数据统计",

"component": "Home",

"childMenu":[{

"id": 2,

"path": "/commercial/dataAccount/Day",

"menuName": "日统计1",

"component": "DataAccountDay"

},

{

"id": 3,

"path": "/commercial/dataAccount/Month",

"menuName": "月统计1",

"component": "DataAccountMonth"

}]

},

{

"id": 4,

"path": "/home",

"menuName": "商业报表中心",

"component": "Home",

"childMenu":[{

"id": 5,

"path": "/commercial/baobiao/Day",

"menuName": "日报表1",

"component": "BaobiaoDay"

},

{

"id": 6,

"path": "/commercial/baobiao/Month",

"menuName": "月报表1",

"component": "BaobiaoMonth"

}]

}

]}

Home.vue

header

router

:default-active="routePath"

unique-opened

background-color="#1f3146"

text-color="#32acca"

active-text-color="#ffd04b"

>

footer

import NavMenu from "@/components/NavMenu.vue";

export default {

data() {

return {

containerHeight: "",

menuData: [],

routePath:"",

currentModuleChinese:"",

user: window.sessionStorage.getItem("user")

};

},

created() {

this.$axios.get("/mock/menudata + ".json").then(res => {-

this.menuData = res.data.data;

});

},

components: { NavMenu },

// watch:{

// $route(){

// console.log(this.$route.path)

// this.routePath = this.$route.path

// }

// },

mounted() {

console.log("mounted")

this.containerHeight = window.innerHeight + "px";

console.log($)

$(window).resize(function() {

console.log("hi")

$("#con").height($(window).height()-2);

});

}

};

.el-header {

background-color: #377fa9;

color: #fff;

height: 50px !important;

line-height: 50px !important;

}

.el-header .left img {

width: 120px;

vertical-align: middle;

}

.el-header .left span {

font-size: 20px;

color: #edf8ff;

margin-left: 15px;

}

.el-header .right {

float: right;

}

.el-header .right a {

color: #fff;

}

.el-aside {

/* color: #32acca !important; */

background: #1f3146 !important;

}

.el-menu {

border-right: none !important;

/* background: #1f3146 !important; */

}

.el-footer {

background: gray;

height: 40px !important;

line-height: 40px !important;

}

.el-footer {

border-top: 1px solid #ccc;

background: #f8fafd;

padding: 10px;

margin-left: 0;

}

.el-footer img {

vertical-align: middle;

width: 65px;

margin-right: 10px;

}

NavMenu.vue

{{item.menuName}}

{{item.menuName}}