vue导航栏通过接口数据遍历动态生成

要做权限管理，导航栏需要根据不同身份来动态生成，实例如下：

            <el-menu
					      :default-active="defaultActive"
					      class="el-menu-vertical-demo"
					      router
					      active-text-color='#29A88D'
						  background-color="#272D34"
     					  text-color="#fff"
					      @open="handleOpen"
					      @close="handleClose">
                <div  v-for="item in routers" :key="item.name">
                  <el-submenu :index="item.path" v-if="item.key">
                    <template slot="title">
                      <i :class="item.icon"></i>
                      <span>{{item.name}}</span>
                    </template>
                    <el-menu-item :index="val.path" v-for="val in item.son" :key="val.name">
                      <template slot="title">
                        <i class="icon iconfont">*</i>
                        <span>{{val.name}}</span>
                      </template>
                    </el-menu-item>
                  </el-submenu>
                  <el-menu-item :index="item.path" v-else>
                    <template slot="title">
                      <i :class="item.icon"></i>
                      <span>{{item.name}}</span>
                    </template>
                  </el-menu-item>
                </div>
	</el-menu>

模拟接口数据如下：

[
  {
    "name": "首页",
    "path": "/index/home",
    "icon": "icon iconfont icon-home",
    "key": false,
    "son": []
  },
  {
    "name": "工单管理",
    "path": "/index/orders",
    "icon": "icon iconfont icon-order",
    "key": true,
    "son": [
      {
        "name": "订单审核",
        "path": "/index/orders/orderCheck",
        "icon": "icon iconfont icon-dui"
      },
      {
        "name": "财务审核",
        "path": "/index/orders/finanCheck",
        "icon": "icon iconfont icon-dui"
      },
      {
        "name": "全部订单",
        "path": "/index/orders/allOrders",
        "icon": "icon iconfont icon-dui"
      }
    ]
  },
  {
    "name": "商家管理",
    "path": "/index/seller",
    "icon": "icon iconfont icon-shangjia",
    "key": true,
    "son": [
      {
        "name": "商家列表",
        "path": "/index/seller/business",
        "icon": "icon iconfont icon-dui"
      }
    ]
  },
  {
    "name": "权限设置",
    "path": "/index/power",
    "icon": "icon iconfont icon-yuechi",
    "key": false,
    "son": []
  },
  {
    "name": "财务统计",
    "path": "/index/finanCount",
    "icon": "icon iconfont icon-caiwu",
    "key": false,
    "son": []
  }
]