路由
添加路由
(1) 添加模块
- 在 router/modules 下创建模块文件夹，新建文件 study.js
js
/* Layout */
const StudyRoutes = [
{
path: "/study",
name: "study",
component: "Layout",
hidden: false,
// permissions: ['system:user:edit'],
meta: {
title: "个人学习栏目",
icon: "monitor",
noCache: false,
link: null,
},
children: [
{
path: "demo1",
name: "studyDemo1",
component: "study/demo1/index",
meta: {
title: "个人学习1",
activeMenu: "/study",
icon: "code",
noCache: false,
link: null,
},
},
{
path: "demo2",
name: "studyDemo2",
component: "study/demo2/index",
meta: {
title: "个人学习2",
activeMenu: "/study",
icon: "code",
noCache: false,
link: null,
},
},
],
},
];
export default StudyRoutes;然后去对应的文件夹下创建对应的文件
(2)修改 路由文件
- router/index.js 文件
js
import StudyRouter from "./modules/study";
const demo2Routes = [
{
name: "System",
path: "/system",
hidden: false,
redirect: "noRedirect",
component: "Layout",
alwaysShow: true,
meta: {
title: "系统管理",
icon: "system",
noCache: false,
link: null,
type: 1,
},
children: [
{
name: "User",
path: "user",
hidden: false,
component: "system/user/index",
meta: {
title: "用户管理",
icon: "user",
noCache: false,
link: null,
type: 2,
},
},
{
name: "Role",
path: "role",
hidden: false,
component: "system/role/index",
meta: {
title: "角色管理",
icon: "peoples",
noCache: false,
link: null,
type: 2,
},
},
{
name: "Menu",
path: "menu",
hidden: false,
component: "system/menu/index",
meta: {
title: "菜单管理",
icon: "tree-table",
noCache: false,
link: null,
type: 2,
},
},
{
name: "Dept",
path: "dept",
hidden: false,
component: "system/dept/index",
meta: {
title: "部门管理",
icon: "tree",
noCache: false,
link: null,
type: 2,
},
},
{
name: "Post",
path: "post",
hidden: false,
component: "system/post/index",
meta: {
title: "岗位管理",
icon: "post",
noCache: false,
link: null,
type: 2,
},
},
{
name: "Dict",
path: "dict",
hidden: false,
component: "system/dict/index",
meta: {
title: "字典管理",
icon: "dict",
noCache: false,
link: null,
type: 2,
},
},
{
name: "Config",
path: "config",
hidden: false,
component: "system/config/index",
meta: {
title: "参数设置",
icon: "edit",
noCache: false,
link: null,
type: 2,
},
},
{
name: "Notice",
path: "notice",
hidden: false,
component: "system/notice/index",
meta: {
title: "通知公告",
icon: "message",
noCache: false,
link: null,
type: 2,
},
},
{
name: "Log",
path: "log",
hidden: false,
redirect: "noRedirect",
component: "ParentView",
alwaysShow: true,
meta: {
title: "日志管理",
icon: "log",
noCache: false,
link: null,
type: 2,
},
children: [
{
name: "Operlog",
path: "operlog",
hidden: false,
component: "monitor/operlog/index",
meta: {
title: "操作日志",
icon: "form",
noCache: false,
link: null,
type: 3,
},
},
{
name: "Logininfor",
path: "logininfor",
hidden: false,
component: "monitor/logininfor/index",
meta: {
title: "登录日志",
icon: "logininfor",
noCache: false,
link: null,
type: 3,
},
},
],
},
],
},
{
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,
},
},
],
},
];
// 动态路由，基于用户权限动态去加载,后期就往这里面加入
export const dynamicRoutes = [...demo2Routes, ...StudyRouter];
const router = createRouter({
history: createWebHistory(),
routes: [...constantRoutes, ...dynamicRoutes],
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
}
return { top: 0 };
},
});
export default router;(3) 换死数据
- store/modules/permission.js 文件
注意
- 因为我们上面改变了接口.所以这里需要先变成死数据
在router/modules/mockrouterdata.js 文件中添加死数据
js
const res = {
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: false,
component: "Layout",
meta: {
title: "若依官网",
icon: "guide",
noCache: false,
link: "http://ruoyi.vip",
},
},
{
path: "/study",
name: "study",
component: "Layout",
hidden: false,
// permissions: ['system:user:edit'],
meta: {
title: "个人学习栏目",
icon: "monitor",
noCache: false,
link: null,
},
children: [
{
path: "demo1",
name: "studyDemo1",
component: "study/demo1/index",
meta: {
title: "个人学习1",
activeMenu: "/study",
icon: "code",
noCache: false,
link: null,
},
},
{
path: "demo2",
name: "studyDemo2",
component: "study/demo2/index",
meta: {
title: "个人学习2",
activeMenu: "/study",
icon: "code",
noCache: false,
link: null,
},
},
],
},
],
};
export default res;(4) 修改模拟数据
- store/modules/permission.js
js
import ResultData from "@/router/modules/mockrouterdata.js";
generateRoutes(roles) {
return new Promise((resolve) => {
const res = ResultData.data;
const sdata = JSON.parse(JSON.stringify(res));
const rdata = JSON.parse(JSON.stringify(res));
const defaultData = JSON.parse(JSON.stringify(res));
const sidebarRoutes = filterAsyncRouter(sdata);
const rewriteRoutes = filterAsyncRouter(rdata, false, true);
const defaultRoutes = filterAsyncRouter(defaultData);
const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
asyncRoutes.forEach((route) => {
router.addRoute(route);
});
this.setRoutes(rewriteRoutes);
this.setSidebarRouters(constantRoutes.concat(sidebarRoutes));
this.setDefaultRoutes(sidebarRoutes);
this.setTopbarRoutes(defaultRoutes);
resolve(rewriteRoutes);
});
},这样自己新增的路由就会出现了