前端：总体布局，侧边栏解析，基于《电商管理系统》Element UI组件库

在这篇文章中，我们依然基于《电商管理系统》。

此次我们分析界面的总体布局，应用ElementUI的布局容器和侧边栏组件，

目录

界面总体布局（采用Container布局容器组件） 

Menu组件 

一级菜单

二级菜单

---

界面总体布局（采用Container布局容器组件） 

界面的总体布局采用ElementUI组件库的Container布局容器

代码如下： 

<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>

实现页面如下：

header区域为系统名字和退出按钮；

aside区域采用Menu菜单组件；

main区域采用<router-view>，以子路由的形式，匹配组件。

        路由配置如下：

    {
        path: '/home',
        component: Home,
        redirect: '/welcome',
        children: [
            { path: '/welcome', component: Welcome },
            { path: '/users', component: Users },
            { path: '/rights', component: Rights },
            { path: '/roles', component: Roles }
        ]
    }

---

Menu组件 

文章的第二部分，我们主要分析侧边栏中Menu组件的应用。

在前端页面中，菜单组件是非常常用的组件，可以布置在侧栏，也可以布置在顶栏，这只需要在el-menu组件中，设置mode属性，默认为垂直模式，mode="horizontal"则可以改成水平模式，侧边栏代码如下：

            <el-aside :width="isCollapse ? '64px' : '200px'">
                <div class="toggle-button"
                    @click="toggleCollapse">|||</div>
                <!-- 侧边栏菜单区域 -->
                <el-menu :uniqueOpened="true"
                    background-color="#333744"
                    text-color="#fff"
                    active-text-color="#409FFF"
                    :unique-opened="false"
                    :collapse="isCollapse"
                    :collapse-transition="false"
                    router
                    :default-active="activePath">
                    <!-- 一级菜单 -->
                    <el-submenu :index="item.id+''"
                        v-for="item in menuList"
                        :key="item.id">
                        <!-- 一级菜单的模板区域 -->
                        <template #title>
                            <!-- 图标 -->
                            <i :class="iconsObj[item.id]"></i>
                            <!-- 文本 -->
                            <span>{{item.authName}}</span>
                        </template>
                        <!-- 二级菜单 -->
                        <el-menu-item :index="'/' + subItem.path"
                            v-for="subItem in item.children"
                            :key="subItem.id"
                            @click="saveNavState('/' + subItem.path)">
                            <template #title>
                                <!-- 图标 -->
                                <i class="el-icon-menu"></i>
                                <!-- 文本 -->
                                <span>{{subItem.authName}}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>

                </el-menu>
            </el-aside>

我们通过el-submenu来设置一级菜单，通过el-menu-item设置二级菜单。

Menu组件提供了background-color来设置背景色，text-color设置菜单的文字颜色，active-text-color设置当前激活菜单的文字颜色，unique-opened这里动态绑定为false，表示不限制只保持一个子菜单的打开（可以多个菜单同时打开），collapse表示是否水平折叠收起菜单（仅在 mode 为 vertical 时可用），collapse-transition此处设为false，表示不开启折叠动画，

router表示启用vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转，

default-active动态绑定当前激活菜单的 index，设置值为动态的activePath

---

我们需要在created生命周期函数中，获取菜单列表，存储在menuList中

        created() {
            this.getMenuList();
            this.activePath = window.sessionStorage.getItem('activePath');
        },

            // 获取所有的菜单
            async getMenuList() {
                const { data: res } = await this.$axios.get('menus');
                if (res.meta.status !== 200) return this.$message.error('res.meta.msg');
                this.menuList = res.data;
                console.log(res);
            },

 从接口返回菜单数据如下：

 分为两级菜单，对于每一级，我们需要用for循环取到。

一级菜单

对于一级菜单，代码如下：

                    <!-- 一级菜单 -->
                    <el-submenu :index="item.id+''"
                        v-for="item in menuList"
                        :key="item.id">
                        <!-- 一级菜单的模板区域 -->
                        <template #title>
                            <!-- 图标 -->
                            <i :class="iconsObj[item.id]"></i>
                            <!-- 文本 -->
                            <span>{{item.authName}}</span>
                        </template>

index动态绑定ID，作为唯一标示

通过v-for指令取得menulist中的每一项

在模板区域放置图标 和 文本，图标采用class动态绑定图标指代字符串

二级菜单

对于二级菜单，代码如下：

                        <!-- 二级菜单 -->
                        <el-menu-item :index="'/' + subItem.path"
                            v-for="subItem in item.children"
                            :key="subItem.id"
                            @click="saveNavState('/' + subItem.path)">
                            <template #title>
                                <!-- 图标 -->
                                <i class="el-icon-menu"></i>
                                <!-- 文本 -->
                                <span>{{subItem.authName}}</span>
                            </template>
                        </el-menu-item>

index绑定激活导航时的path路径

v-for指令循环当前item项的children列表

click事件为saveNavState('/' + subItem.path)

代码如下：

            // 保存链接的激活状态
            saveNavState(activePath) {
                window.sessionStorage.setItem('activePath', activePath);
                this.activePath = activePath;
            }

首先在sessionStorage中保存Item项activePath

并将Menu组件default-active属性动态绑定当前激活菜单的activePath，置为传入的path值

然后再二级菜单模板区域放置图标和文本