vue+element-ui搭建迷你电商平台系列篇（八）

这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战

接上一篇juejin.cn/post/703415…

本篇主要就是介绍一下各种vue组件，上篇已经介绍过头部样式，本篇要介绍的是「侧边栏样式」的实现方式。

0. 侧边栏样式

   还是去element组件库，找到导航；直接把代码copy过来，放在<el-aside>标签下面

   <el-menu
         default-active="2"
         class="el-menu-vertical-demo"
         @open="handleOpen"
         @close="handleClose">
         <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>
   

   这是element里copy的源码，我们修改整理一下，这里有几个属性需要注意；网站上有对应的属性说明可以详细看一下是什么作用，这里标红的是我用到的属性。

   <el-aside class="aside" width="200px">
           <el-menu
             :unique-opened="true"
             :router="true">
             <el-submenu index="2">
               <template slot="title">
                 <i class="el-icon-user-solid"></i>
                 <span>用户管理</span>
               </template>
               <el-menu-item index="/user">
                 <i class="el-icon-user"></i>
                 <span>用户列表</span>
               </el-menu-item>
             </el-submenu>
           </el-menu>
         </el-aside>
   

   可以对比一下上面从element里copy的代码，我这里改了icon图标，让icon不光在导航里，在选项中也展示；设置了属性分别是unique-opened:是否只保持一个子菜单的展开router :是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 两个属性设置成true。当我点击用户列表的时候就会路由到/user这个路由下；

   看下效果；多个选项的话只需要复制 <el-submenu> </el-submenu> 这一段就好了。

   明天就是这个系列的最后一篇了，请期待。