菜單欄

若依框架的側邊欄組件通常由菜單項和子菜單組成。
登錄后，會獲取用戶擁有的路由菜單

{"msg": "操作成功","code": 200,"data": [{"name": "System","path": "/system","hidden": false,"redirect": "noRedirect","component": "Layout","alwaysShow": true,"meta": {"title": "系統管理","icon": "system","noCache": false,"link": null},"children": [{"name": "User","path": "user","hidden": false,"component": "system/user/index","meta": {"title": "用戶管理","icon": "user","noCache": false,"link": null}},{"name": "Role","path": "role","hidden": false,"component": "system/role/index","meta": {"title": "角色管理","icon": "peoples","noCache": false,"link": null}},{"name": "Menu","path": "menu","hidden": false,"component": "system/menu/index","meta": {"title": "菜單管理","icon": "tree-table","noCache": false,"link": null}},{"name": "Dept","path": "dept","hidden": false,"component": "system/dept/index","meta": {"title": "部門管理","icon": "tree","noCache": false,"link": null}},{"name": "Post","path": "post","hidden": false,"component": "system/post/index","meta": {"title": "崗位管理","icon": "post","noCache": false,"link": null}},{"name": "Dict","path": "dict","hidden": false,"component": "system/dict/index","meta": {"title": "字典管理","icon": "dict","noCache": false,"link": null}},{"name": "Config","path": "config","hidden": false,"component": "system/config/index","meta": {"title": "參數設置","icon": "edit","noCache": false,"link": null}},{"name": "Notice","path": "notice","hidden": false,"component": "system/notice/index","meta": {"title": "通知公告","icon": "message","noCache": false,"link": null}},{"name": "Log","path": "log","hidden": false,"redirect": "noRedirect","component": "ParentView","alwaysShow": true,"meta": {"title": "日志管理","icon": "log","noCache": false,"link": null},"children": [{"name": "Operlog","path": "operlog","hidden": false,"component": "monitor/operlog/index","meta": {"title": "操作日志","icon": "form","noCache": false,"link": null}},{"name": "Logininfor","path": "logininfor","hidden": false,"component": "monitor/logininfor/index","meta": {"title": "登錄日志","icon": "logininfor","noCache": false,"link": null}}]}]},{"name": "Monitor","path": "/monitor","hidden": false,"redirect": "noRedirect","component": "Layout","alwaysShow": true,"meta": {"title": "系統監控","icon": "monitor","noCache": false,"link": null},"children": [{"name": "Online","path": "online","hidden": false,"component": "monitor/online/index","meta": {"title": "在線用戶","icon": "online","noCache": false,"link": null}},{"name": "Job","path": "job","hidden": false,"component": "monitor/job/index","meta": {"title": "定時任務","icon": "job","noCache": false,"link": null}},{"name": "Druid","path": "druid","hidden": false,"component": "monitor/druid/index","meta": {"title": "數據監控","icon": "druid","noCache": false,"link": null}},{"name": "Server","path": "server","hidden": false,"component": "monitor/server/index","meta": {"title": "服務監控","icon": "server","noCache": false,"link": null}},{"name": "Cache","path": "cache","hidden": false,"component": "monitor/cache/index","meta": {"title": "緩存監控","icon": "redis","noCache": false,"link": null}},{"name": "CacheList","path": "cacheList","hidden": false,"component": "monitor/cache/list","meta": {"title": "緩存列表","icon": "redis-list","noCache": false,"link": null}}]},{"name": "Tool","path": "/tool","hidden": false,"redirect": "noRedirect","component": "Layout","alwaysShow": true,"meta": {"title": "系統工具","icon": "tool","noCache": false,"link": null},"children": [{"name": "Build","path": "build","hidden": false,"component": "tool/build/index","meta": {"title": "表單構建","icon": "build","noCache": false,"link": null}},{"name": "Gen","path": "gen","hidden": false,"component": "tool/gen/index","meta": {"title": "代碼生成","icon": "code","noCache": false,"link": null}},{"name": "Swagger","path": "swagger","hidden": false,"component": "tool/swagger/index","meta": {"title": "系統接口","icon": "swagger","noCache": false,"link": null}}]},{"name": "Http://ruoyi.vip","path": "http://ruoyi.vip","hidden": true,"component": "Layout","meta": {"title": "若依官網","icon": "guide","noCache": false,"link": "http://ruoyi.vip"}}]
}

動態路由

打開src\router\index.js

公共路由主要包括登錄、注冊、首頁、401、404等頁面路由

既然是動態路由，并且后端接口會傳過來用戶擁有的路由信息。
找一找哪里實現了動態路由的構造。
在src/permission.js中

找到中src\store\modules\permission.js中的generateRoutes(roles)方法：

從后端獲取到路由之后，遍歷后臺傳來的路由字符串，轉換為組件對象。遍歷上面提到的dynamicRoutes,把有權限的加入菜單。

創建菜單

既然菜單與路由是由后端傳過來的。那么就可以進行增刪改查，自定義側邊欄的菜單顯示了。
創建一個新的功能頁面：

··················································································································································································

··················································································································································································

·························································································
創建好以后：

就可以看的菜單欄有我們新的菜單。（超級管理員角色登錄）
我們在@/views 文件下創建對應的文件src\views\ai\chat\index.vue
隨便加點內容。

<template>訊飛星火
</template><script></script>

點擊我們新添加的菜單，發現可以訪問。