效果圖
步驟
引入依賴
新建home.vue
-
佈局容器
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
-
菜單
導航頁面code
<template>
<el-container class="home-container">
<!--頭部區域-->
<el-header>
<div>
<img src="../assets/logo.png" alt="logo" style="width: 60px;height: 60px">
<span>Halo-Admin</span>
</div>
<el-button type="primary" >退出系統</el-button>
</el-header>
<!-- 頁面主體-->
<el-container>
<!-- 側邊欄-->
<el-aside>
<!-- 側邊欄菜單區域-->
<el-menu
default-active="2"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>導航一</span>
</template>
<el-menu-item-group>
<template slot="title">分組一</template>
<el-menu-item index="1-1">選項1</el-menu-item>
<el-menu-item index="1-2">選項2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分組2">
<el-menu-item index="1-3">選項3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">選項4</template>
<el-menu-item index="1-4-1">選項1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">導航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">導航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">導航四</span>
</el-menu-item>
</el-menu>
</el-aside>
<!--右側內容主體-->
<el-main>
<!--路由佔位符-->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: "home",
data() {
return {
isCollapse:false,
};
},
methods: {
},
created() {
}
}
</script>
<style lang="less" scoped>
.home-container {
height: 100%;
}
.el-header {
background-color: #373D41;
display: flex;
justify-content: space-between;
padding-left: 0;
align-items: center;
color: #ffffff;
font-size: 20px;
> div {
display: flex;
align-items: center;
span {
margin-left: 15px;
}
}
}
.el-aside {
background-color: #373D41;
.el-menu {
border-right: none;
}
}
.el-main {
background-color: #eaedf1;
}
</style>
-
此時頁面效果如下所示:
-
設置全局樣式
/*全局樣式表*/
html,body,#app{
height: 100%;
margin: 0;
padding: 0;
}
注需要將全局樣式文件引入到main.js中
最終效果如下:
此時的菜單爲靜態數據,我們只需要從後端調用接口加載菜單即可動態展示。