获取后台数据，并渲染

获取后台数据，以菜单数据为例

1. 页面刚加载就获取数据，在script中定义生命周期函数

 created() {
    this.getMenuList();
  },

2. 在script的methods中实现getMenuList方法

sync getMenuList() {
      //请求menus路径并解构返回数据，重命名weires
      const { data: res } = await this.$http.get("menus");
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      this.menulist = res.data;
    },

3.为了渲染把获取的数据挂载在data中

  data() {
    return {
      // 左侧菜单数据
      menulist: [],
    };

4.在页面模板中通过v-for循环渲染

  <!-- 一级菜单 -->
  <!-- index只接收字符串所以+'' ,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-submenu>