菜单栏
若依框架的侧边栏组件通常由菜单项和子菜单组成。
登录后，会获取用户拥有的路由菜单
json
{
"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
随便加点内容。
js
<template>
讯飞星火
</template>
<script>
</script>点击我们新添加的菜单，发现可以访问。