vue配合element-ui中的el-menu搭建Home页面

<template>
  <div>
    <el-menu :default-active="$route.path" background-color="#032655" text-color="rgb(84, 130, 188)" active-text-color="#fff" :unique-opened="true" :router="true">
      <div v-for="item in menu" :key="item.id">
        <!-- <el-menu-item :index="item.url">-->
        <el-menu-item v-if="item.children == null" :index="item.path" :key="item.id">
          <!-- <i class="el-icon-house"></i> -->
            <span slot="title">{{item.name}}</span>
        </el-menu-item> 
        <el-submenu v-if="item.children != null" :index="item.id + ''" :key="item.id">
          <template slot="title">
            <!-- <i :class=" item.icon "></i> -->
            <span>{{item.name}}</span>
          </template>
          <el-menu-item v-for="it in item.children" :key="it.id" :index="it.path">{{it.name}}</el-menu-item>
        </el-submenu>
      </div>
    </el-menu>
  </div>
</template>
<script>
  // import loadView from '@/pages/permission'
  // const _import = require('@/pages/permission')
  export default {
    data() {
      return {
        menu: []
      }
    },
    methods: {
      initTree() {
        this.$axios.post('api/user/getInfo').then(res=>{
          // console.log(res.data.data.permission.children)
          this.menu = res.data.data.permission.children
          // this.$router.addRoutes(this.menu)
          // this.$router.addRoutes(this.translateTree(JSON.stringify(this.menu)))
          // this.$router.options.routes = this.menu
          const arr = this.translateTree(this.menu)
          console.log(arr, '????????????')
          this.$router.addRoutes(arr)
          // this.$router.options.routes = this.$router.options.routes.concat(this.menu)
          // console.log(this.$router, 'router')
          // console.log(this.menu, '菜单')
          // this.menu.map(item=>{
          //   console.log(item.children)
          // })
        })
      },
      translateTree (arr) {
        // console.log(arr, '46')
        let newArr = []
        for (let i = 0; i < arr.length; i++) {
          console.log(arr[i].componentPath, 'cccccccccccccc')
          console.log(arr[i].children, 'pppppppppppppppppppp')
          if (arr[i].componentPath !== "" ){
            newArr.push({
              path: arr[i].path,
              name: arr[i].name,
              // components: require('@/pages/' + arr[i].componentPath + '.vue')
              component: resolve => require([`@/pages/${arr[i].componentPath}.vue`], resolve)
            })
          } else {
            arr[i].children.map(item => {
              newArr.push({
                path: item.path,
                name: item.name,
                component: resolve => require([`@/pages/${item.componentPath}.vue`], resolve)
              })
            })
          }
          
          // if (arr[i].)
        }
        // console.log(arr, 'aaaaaaaaaaaaaaaaaaaaaaaaa')
        return newArr
      }
    },
    created() {
      this.initTree()
    }
  }
</script>
<style>

</style>