element ui vue 路由_Vue实战项目：电商管理系统（Element-UI）-（3）主页

1.主页布局

（1）实现主页的基本布局：elementui：Container 布局容器

2.axios请求拦截器

（1）设置axios中的请求拦截器为其添加token，为每次api请求挂载请求头，使其能够通过需要权限的接口

添加请求拦截器

3.左侧菜单

（1）获取左侧菜单：在生命周期阶段调用函数获取表单

（2）通过双层for循环渲染左侧菜单：先看后台接口的数据，利用双层for循环来渲染菜单，在使用渲染第二次v-for循环中要注意嵌套循环，所以第二次for循环为“subItem in item.children”

后台数据

表单中的嵌套for循环

（3）设置菜单中的index属性：为其动态绑定index属性，解决静态设置index后点击全部一级菜单同时打开的情况（由于index的属性是字符串，而item.id是数值，在其中加上单引号可将其转换为字符串）

静态设置index属性，则所有一级菜单会同时打开

动态绑定index属性

（4）每次只打开一个菜单：使用elementui导航菜单组件中的unique-opened属性

4.主页路由