一 aixos请求拦截

通过axios请求拦截器添加token,保证拥有数据获取的权限

具体操作需要到main.js里进行操作，如图

二 获取数据和渲染数据到页面

1.获取数据

（1）首先需要利用生命周期函数created(),

(2)在methods里写入函数

res打印结果如下

2.渲染数据到页面

首先在data中定义了一个menuLis数组，然后把res.data赋值给menuList,然后导航栏中调用渲染即可，如图所示：

三、welcome页面

（1） 首先需要新建一个Welcome组件

（2） 然后需要把Welcome做为home组件的一个子组件，在Main主题区域弄一个路由占位符

四、element-ui在此章节中的应用（包括collapse，unique-open，router）

1.导航栏的折叠

(1)未设置可折叠前，点击无反应

(2)通过element-ui的collapse可以实现

（3）实现过程，如图所示。

其中:collapse="isCollapse（true）"就是代表可以折叠，:collapse-transition="false"代表没有折叠动画。 (4)最终效果

2.只保留一个子菜单的展开

（1）未设置只保留一个子菜单时

（2）通过把在<el-menu中加入unique-open属性，值设置为true

（3）最终效果，实现只保留一个子菜单

3.侧边栏路由的改造，也就是点击子菜单跳转到其它页面。

（1）在设置侧边栏路由之前是点击子菜单地址栏是不会发生改变的

（2）通过把在<el-menu中加入router属性，值设置为true则可以发生页面跳转，以index作为跳转path

（3）实现侧边栏路由跳转后的效果