[toc] ### 一、创建路由对应组件 1.1 在views目录下创建course文件夹 1.2 在course文件夹内创建media.vue组件 1.3 在course文件夹内创建audio.vue组件 1.4 在course文件夹内创建video.vue组件 1.5 在course文件夹内创建column.vue组件 ### 二、配置路由 ``` { path : "/course", component : Layout, redirect : "/course/media", name : "Course", alwayShow : true, meta : { title : "课程", icon : "excel", rolea : ["admin","editor"] }, children : [ { path : "media", name : "Media", component : ()=> import("@/views/course/media.vue") meta : {title : "图文"} }, { path : "audio", name : "Audio", component : ()=> import("@/views/course/audio.vue") meta : {title : "音频"} }, { path : "video", name : "Video", component : ()=> import("@/views/course/video.vue") meta : {title : "视频"} }, { path : "column", name : "Column", component : ()=> import("@/views/course/column.vue") meta : {title : "专栏"} } ] } ``` ### 三、vue-element-admin中icon图标的使用 - 取消icon图标的路由注释,在页面内可以查看vue-element-admin提供的icon图标 ### 四、在variables.scss文件中修改侧边栏的宽度 ``` $sideBarWidth : 150px; ```