vue 从后台获取菜单数据并表示在前端的过程

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">
    <!--图标--&g