[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; ```