侧边导航栏

<template>
  <div class="aside">
        <slot name="goods-aside">
            <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened router :default-active="activePath">
          <!-- 一级菜单 -->
          <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
            <!-- 一级菜单的模板区域 -->
            <template slot="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 slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>{{subItem.authName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
        </slot>
  </div>
</template>

export default {
  data () {
    return {
        activePath: '',
        menulist: [
         {"id":1,"authName":"商品管理", 
            "children":[
                {"id":"11", "authName":"商品列表", "path":"goodsList", "components": "GoodsList"},
                {"id":"12", "authName":"产品类型列表", "path":"goodsStyleList", "components": "GoodsStyleList"},
                {"id":"13", "authName":"分类列表", "path":"goodCateList", "components": "GoodCateList"},
                {"id":"14", "authName":"商品分类列表", "path":"goodCategoriesList", "components": "GoodCategoriesList"}
            ]
        },
        {"id":2,"authName":"订单管理", 
            "children":[
                {"id":"22", "authName":"订单列表", "path":"ordersList", "components": "OrdersList"},
                {"id":"23", "authName":"待发货订单列表", "path":"waitSendGoods", "components": "WaitSendGoods"},
            ]
        },
        {"id":3,"authName":"门户管理", 
            "children":[
                {"id":"33", "authName":"banner列表", "path":"bannerList", "components": "BannerList"},
                {"id":"34", "authName":"首页主导航列表", "path":"companyProfileList", "components": "CompanyProfileList"},
                {"id":"35", "authName":"专题列表", "path":"extensionList", "components": "ExtensionList"}
            ]
        },
        {"id":4,"authName":"门户管理", 
            "children":[
                {"id":"44", "authName":"app用户收货地址列表", "path":"receiveAdress", "components": "ReceiveAdress"},
                {"id":"45", "authName":"申请列表", "path":"withdrawalRecordList", "components": "WithdrawalRecordList"},
                {"id":"46", "authName":"待提现列表", "path":"toBePresentList", "components": "ToBePresentList"},
                {"id":"47", "authName":"加盟商列表", "path":"franchiseeList", "components": "FranchiseeList"}
            ]
        },
        {"id":5,"authName":"系统管理", 
            "children":[
                {"id":"55", "authName":"账号列表", "path":"member", "components": "Member"},
                {"id":"56", "authName":"app下载地址列表", "path":"linkManagInit", "components": "LinkManagInit"},
                {"id":"57", "authName":"版本更新列表", "path":"getAppUpdateList", "components": "GetAppUpdateList"},
                {"id":"58", "authName":"app用户列表", "path":"appPageList", "components": "AppPageList"}
            ]
        }
      ],
      iconsObj: {
        '1': 'el-icon-knife-fork',
        '2': 'el-icon-s-marketing',
        '3': 'el-icon-postcard',
        '4': 'el-icon-s-custom',
        '5': 'el-icon-s-custom'
      }
    }
  },

  components: {},
  created() {
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    saveNavState(activePath) {
        window.sessionStorage.setItem('activePath', activePath)
    }
  }
}