Element后台管理的整體布局

Element UI實現后台管理界面的布局

目錄

• Element UI實現后台管理界面的布局
  • 整體樣式
  • 布局說明
    • 關於布局容器
    • 左側菜單欄說明
    • 實現首頁路由跳轉

整體樣式

布局說明

關於布局容器

布局的話主要采用的是左右側分開布局
主要是在實現多端的時候，頁面不會發生變形，基本的模板不會有改變
左側aside側邊欄伸縮比較方便實現

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>

左側菜單欄說明

采用的是包含二級的導航欄，整體相對簡潔
實現單菜單打開，一個菜單打開其他菜單關閉

注意：
菜單欄的縮放：主要實現是根據點擊事件設置當前的狀態，更改對應的菜單欄寬度
動態路由的加載：將Axios獲取到的路由數據中的authName取出來渲染

<!-- 側邊欄 -->
        <el-aside :width="isCollapse ? '64px':'200px'">      //實現側邊欄的收縮
            <div class="homeLogo">
              <img src="../assets/Homyit.png" alt="">
            </div>
            <el-menu
            background-color="#344766"
            text-color="#fff"
            active-text-color="#ffd04b"
            unique-opened      //唯一菜單打開
            :collapse="isCollapse"          //綁定收縮屬性
            :collapse-transition="false"      //收縮動畫
            router>
            <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">      //渲染菜單
              <!-- 一級菜單 -->
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{item.authName}}</span>
              </template>
                <el-menu-item :index="'/' + subItem.path + ''" v-for="subItem in item.children" :key="subItem.id">      //渲染二級菜單
                  <template slot="title">
                    <i class="el-icon-s-grid"></i>
                    <span>{{subItem.authName}}</span>
                  </template>
                </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

實現首頁路由跳轉

當跳轉到home路由的時候，重定向到welcome組件頁面

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    {
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [{ path: '/welcome', component: Welcome }]
    }
  ]
})