【Vue3从入门到项目实现】RuoYi-Vue3若依框架前端学习——动态路由与菜单栏

菜单栏

若依框架的侧边栏组件通常由菜单项和子菜单组成。

登录后，会获取用户拥有的路由菜单

{

"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

随便加点内容。

点击我们新添加的菜单，发现可以访问。