Vue---day08侧边栏导航（双层for循环、字体图标、高亮显示）

效果图

Home.vue

<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <img src="../assets/heima.png" alt="">
        <span>电商后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 折叠的时候宽度64px，不折叠的时候200px-->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!-- 侧边栏菜单区域 
         unique-opened用来控制只有一个一级菜单展开；
         :collapse-transition="false"表示折叠菜单的时候没有动画效果；
         router表示开启路由模式：点击二级菜单的时候会对应跳转到:index页面；
         :default-active 设置被点击的菜单高亮显示
        -->
        <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath">
          <!-- 一级菜单 -->
          <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
            <!-- 一级菜单的模板区域 -->
            <template slot="title">
              <!-- 图标 -->
              <i :