1.通过axiox 向后台发起请求

在methods中添加方法

//获取所有的菜单
async getMenuList(){
   //向后台api发起请求
  const {data:res} = await this.$http.get('menus')
  //判断请求是否成功，如果不成功则弹出消息提示
  if (res.meta.status !== 200) return this.$message.error(res.meta.msg) ;
  // 将接收的数据，赋值给menulist列表
  this.menulist = res.data

 }

2.在data 中定义数组menulist []，实现数据的双向绑定。

data(){
  return{
    //将menulist[] 挂载，进行双向数据绑定。
    menulist:[]
  }
},

3.将数据渲染到前端导航菜单栏

注意：菜单的index 必须为特有值，如果相同则导致，点开一个菜单其他的菜单也将自动点开。

<el-submenu :index="item.id+''" v-for="item in menulist":key="item.id" >
  <!--一级菜单的模板区域-->
  <template slot="title">
    <!--图标-->
    <i class="el-icon-location"></i>
    <!-- 将一级菜单名取出-->
    <span>{{item.authName}}</span>
  </template>

  <!--二级菜单-->
  <!--通过内循环取出每组数据-->
  <el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id">
    <!--二级菜单的模板区域-->
    <template slot="title">
      <!--图标-->
      <i class="el-icon-location"></i>
      <!-- 将二级菜单名取出-->
      <span>{{ subItem.authName }}</span>
    </template>
  </el-menu-item>
</el-submenu>