day02 - 首页布局 + 用户管理，web前端框架开发实例

},

async getMenuList() {

// 发送请求获取左侧菜单数据

const { data: res } = await this.$http.get(‘menus’)

if (res.meta.status !== 200) return this.$message.error(res.meta.msg)

this.menuList = res.data

console.log(res)

}

}

}

通过v-for双重循环渲染左侧菜单

<el-menu

background-color=“#333744”

text-color=“#fff”

active-text-color=“#ffd04b”>

{ {item.authName}}

{ {subItem.authName}}

5.设置激活子菜单样式

通过更改el-menu的active-text-color属性可以设置侧边栏菜单中点击的激活项的文字颜色

通过更改菜单项模板（template）中的i标签的类名，可以将左侧菜单栏的图标进行设置，我们需要在项目中使用第三方字体图标

在数据中添加一个iconsObj：

iconsObj: {

‘125’:‘iconfont icon-user’,

‘103’:‘iconfont icon-tijikongjian’,

‘101’:‘iconfont icon-shangpin’,

‘102’:‘iconfont icon-danju’,

‘145’:‘iconfont icon-baobiao’

}

然后将图标类名进行数据绑定，绑定iconsObj中的数据：

为了保持左侧菜单每次只能打开一个，显示其中的子菜单，我们可以在el-menu中添加一个属性unique-opened

或者也可以数据绑定进行设置(此时true认为是一个bool值，而不是字符串) :unique-opened="true"

6.制作侧边菜单栏的伸缩功能

在菜单栏上方添加一个div

<el-menu

:collapse=“isCollapse”

:collapse-transition=“false”

…

然后给div添加样式，给div添加事件：

7.在后台首页添加子级路由

新增子级路由组件Welcome.vue

在router.js中导入子