数据结构
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}}
方法)
)
