jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(projects): 路由文件夹重构

Browse Source
This commit is contained in:
Soybean
2021-10-21 11:59:55 +08:00
parent b80c224664
commit b2854d57e8
28 changed files with 150 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/router/components/about.ts
View File

@ -1,6 +0,0 @@
import { RouteNameMap, setCacheName } from '../helpers';
import About from '@/views/about/index.vue';
setCacheName(About, RouteNameMap.get('about'));
export { About };

9
src/router/components/component.ts
View File

@ -1,9 +0,0 @@
import { RouteNameMap, setCacheName } from '../helpers';
import ComponentMap from '@/views/component/map/index.vue';
import ComponentVideo from '@/views/component/video/index.vue';
setCacheName(ComponentMap, RouteNameMap.get('component_map'));
setCacheName(ComponentVideo, RouteNameMap.get('component_video'));
export { ComponentMap, ComponentVideo };

8
src/router/components/dashboard.ts
View File

@ -1,8 +0,0 @@
import { RouteNameMap, setCacheName } from '../helpers';
import DashboardAnalysis from '@/views/dashboard/analysis/index.vue';
import DashboardWorkbench from '@/views/dashboard/workbench/index.vue';
setCacheName(DashboardAnalysis, RouteNameMap.get('dashboard_analysis'));
setCacheName(DashboardWorkbench, RouteNameMap.get('dashboard_workbench'));
export { DashboardAnalysis, DashboardWorkbench };

10
src/router/components/document.ts
View File

@ -1,10 +0,0 @@
import { RouteNameMap, setCacheName } from '../helpers';
import DocumentVue from '@/views/document/vue/index.vue';
import DocumentVite from '@/views/document/vite/index.vue';
import DocumentNaive from '@/views/document/naive/index.vue';
setCacheName(DocumentVue, RouteNameMap.get('document_vue'));
setCacheName(DocumentVite, RouteNameMap.get('document_vite'));
setCacheName(DocumentNaive, RouteNameMap.get('document_naive'));
export { DocumentVue, DocumentVite, DocumentNaive };

10
src/router/components/exception.ts
View File

@ -1,10 +0,0 @@
import { RouteNameMap, setCacheName } from '../helpers';
import Exception403 from '@/views/system/exception/403.vue';
import Exception404 from '@/views/system/exception/404.vue';
import Exception500 from '@/views/system/exception/500.vue';
setCacheName(Exception404, RouteNameMap.get('exception_404'));
setCacheName(Exception403, RouteNameMap.get('exception_403'));
setCacheName(Exception500, RouteNameMap.get('exception_500'));
export { Exception403, Exception404, Exception500 };

7
src/router/components/index.ts
View File

@ -1,7 +0,0 @@
export { Login, NoPermission, NotFound, ServiceError } from './system';
export { DashboardAnalysis, DashboardWorkbench } from './dashboard';
export { DocumentVue, DocumentVite, DocumentNaive } from './document';
export { ComponentMap, ComponentVideo } from './component';
export { Exception403, Exception404, Exception500 } from './exception';
export { MultiMenuFirstSecond } from './multiMenu';
export { About } from './about';

6
src/router/components/multiMenu.ts
View File

@ -1,6 +0,0 @@
import { RouteNameMap, setCacheName } from '../helpers';
import MultiMenuFirstSecond from '@/views/multi-menu/first/second/index.vue';
setCacheName(MultiMenuFirstSecond, RouteNameMap.get('multi-menu_first_second'));
export { MultiMenuFirstSecond };

12
src/router/components/system.ts
View File

@ -1,12 +0,0 @@
import { RouteNameMap, setCacheName } from '../helpers';
import Login from '@/views/system/login/index.vue';
import NoPermission from '@/views/system/exception/403.vue';
import NotFound from '@/views/system/exception/404.vue';
import ServiceError from '@/views/system/exception/500.vue';
setCacheName(Login, RouteNameMap.get('login'));
setCacheName(NoPermission, RouteNameMap.get('no-permission'));
setCacheName(NotFound, RouteNameMap.get('not-found'));
setCacheName(ServiceError, RouteNameMap.get('service-error'));
export { Login, NoPermission, NotFound, ServiceError };

35
src/router/helpers/cache.ts
View File

@ -1,35 +0,0 @@
import type { RouteRecordRaw } from 'vue-router';
function getCacheName(route: RouteRecordRaw, isCache: boolean) {
const cacheNames: string[] = [];
const hasChild = hasChildren(route);
if (isCache && !hasChild) {
const name = route.name as string;
cacheNames.push(name);
}
if (hasChild) {
const children = route.children as RouteRecordRaw[];
children.forEach(item => {
const isChildCache = isCache || isKeepAlive(item);
cacheNames.push(...getCacheName(item, isChildCache));
});
}
return cacheNames;
}
function isKeepAlive(route: RouteRecordRaw) {
return Boolean(route?.meta?.keepAlive);
}
function hasChildren(route: RouteRecordRaw) {
return Boolean(route.children && route.children.length);
}
/** 获取被缓存的路由 */
export default function getCacheRoutes(routes: RouteRecordRaw[]) {
const cacheNames: string[] = [];
routes.forEach(route => {
const isCache = isKeepAlive(route);
cacheNames.push(...getCacheName(route, isCache));
});
return cacheNames;
}

40
src/router/helpers/index.ts
View File

@ -1,40 +0,0 @@
import type { Component } from 'vue';
import { getRouteNameMap } from '@/utils';
import { BasicLayout, BlankLayout } from '@/layouts';
import type { CustomRoute } from '@/interface';
import getCacheRoutes from './cache';
import transformRouteToMenu from './menus';
/** 给需要缓存的页面组件设置名称 */
export function setCacheName(component: Component, name?: string) {
if (name) {
Object.assign(component, { name });
}
}
/** 路由name map */
export const RouteNameMap = getRouteNameMap();
function getSingleRoute(route: CustomRoute, container: Component) {
const routeItem: CustomRoute = {
name: `${route.name as string}_`,
path: `${route.path}_`,
component: container,
redirect: { name: route.name },
meta: {
isNotMenu: true
},
children: [route]
};
return routeItem;
}
export function getSingleBasicLayoutRoute(route: CustomRoute) {
return getSingleRoute(route, BasicLayout);
}
export function getSingleBlankLayoutRoute(route: CustomRoute) {
return getSingleRoute(route, BlankLayout);
}
export { getCacheRoutes, transformRouteToMenu };

48
src/router/helpers/menus.ts
View File

@ -1,48 +0,0 @@
import type { Component } from 'vue';
import type { CustomRoute, GlobalMenuOption } from '@/interface';
import { dynamicIconRender } from '@/utils';
/** 判断路由是否作为菜单 */
function asMenu(route: CustomRoute) {
return !route.meta?.isNotMenu;
}
/** 给菜单添加可选属性 */
function addPartialProps(menuItem: GlobalMenuOption, icon?: Component, children?: GlobalMenuOption[]) {
const item = { ...menuItem };
if (icon) {
Object.assign(item, { icon: dynamicIconRender(icon) });
}
if (children) {
Object.assign(item, { children });
}
return item;
}
export default function transformRouteToMenu(routes: CustomRoute[]) {
const globalMenu: GlobalMenuOption[] = [];
routes.forEach(route => {
const { name, path, meta } = route;
const routeName = name as string;
let menuChildren: GlobalMenuOption[] | undefined;
if (route.children) {
menuChildren = transformRouteToMenu(route.children as CustomRoute[]);
}
const menuItem: GlobalMenuOption = addPartialProps(
{
key: routeName,
label: meta?.title ?? routeName,
routeName,
routePath: path
},
meta?.icon,
menuChildren
);
if (asMenu(route)) {
globalMenu.push(menuItem);
} else if (menuChildren) {
globalMenu.push(...menuChildren);
}
});
return globalMenu;
}

13
src/router/index.ts
View File

@ -1,9 +1,8 @@
import { getCacheRoutes, transformRouteToMenu } from './helpers';
import { customRoutes, routes } from './routes';
import { getCacheRoutes, transformRouteToMenu } from '@/utils';
import { customRoutes, routes, ROUTE_HOME } from './routes';
import { router, setupRouter } from './setup';
export { router, setupRouter } from './setup';
export { ROUTE_HOME, customRoutes, routes } from './routes';
export { RouteNameMap } from './helpers';
const cacheRoutes = getCacheRoutes(routes);
const menus = transformRouteToMenu(customRoutes);
export const cacheRoutes = getCacheRoutes(routes);
export const menus = transformRouteToMenu(customRoutes);
export { customRoutes, routes, ROUTE_HOME, router, setupRouter, cacheRoutes, menus };

12
src/router/modules/about.ts
View File

@ -1,11 +1,14 @@
import { BookInformation24Regular } from '@vicons/fluent';
import type { CustomRoute } from '@/interface';
import { EnumRoutePath, EnumRouteTitle } from '@/enum';
import { RouteNameMap, getSingleBasicLayoutRoute } from '../helpers';
import { About } from '../components';
import { ROUTE_NAME_MAP, setRouterCacheName, setSingleRoute } from '@/utils';
import { BasicLayout } from '@/layouts';
import About from '@/views/about/index.vue';
const ABOUT: CustomRoute = getSingleBasicLayoutRoute({
name: RouteNameMap.get('about'),
setRouterCacheName(About, ROUTE_NAME_MAP.get('about'));
const ABOUT: CustomRoute = setSingleRoute(BasicLayout, {
name: ROUTE_NAME_MAP.get('about'),
path: EnumRoutePath.about,
component: About,
meta: {
@ -14,4 +17,5 @@ const ABOUT: CustomRoute = getSingleBasicLayoutRoute({
icon: BookInformation24Regular
}
});
export default ABOUT;

16
src/router/modules/component.ts
View File

@ -2,14 +2,18 @@ import { AppStore24Regular } from '@vicons/fluent';
import type { CustomRoute } from '@/interface';
import { EnumRoutePath, EnumRouteTitle } from '@/enum';
import { BasicLayout } from '@/layouts';
import { RouteNameMap } from '../helpers';
import { ComponentMap, ComponentVideo } from '../components';
import { ROUTE_NAME_MAP, setRouterCacheName } from '@/utils';
import ComponentMap from '@/views/component/map/index.vue';
import ComponentVideo from '@/views/component/video/index.vue';
setRouterCacheName(ComponentMap, ROUTE_NAME_MAP.get('component_map'));
setRouterCacheName(ComponentVideo, ROUTE_NAME_MAP.get('component_video'));
const COMPONENT: CustomRoute = {
name: RouteNameMap.get('component'),
name: ROUTE_NAME_MAP.get('component'),
path: EnumRoutePath.component,
component: BasicLayout,
redirect: { name: RouteNameMap.get('component_map') },
redirect: { name: ROUTE_NAME_MAP.get('component_map') },
meta: {
requiresAuth: true,
title: EnumRouteTitle.component,
@ -17,7 +21,7 @@ const COMPONENT: CustomRoute = {
},
children: [
{
name: RouteNameMap.get('component_map'),
name: ROUTE_NAME_MAP.get('component_map'),
path: EnumRoutePath.component_map,
component: ComponentMap,
meta: {
@ -27,7 +31,7 @@ const COMPONENT: CustomRoute = {
}
},
{
name: RouteNameMap.get('component_video'),
name: ROUTE_NAME_MAP.get('component_video'),
path: EnumRoutePath.component_video,
component: ComponentVideo,
meta: {

12
src/router/modules/dashboard.ts
View File

@ -2,15 +2,17 @@ import { Dashboard } from '@vicons/carbon';
import type { CustomRoute } from '@/interface';
import { EnumRoutePath, EnumRouteTitle } from '@/enum';
import { BasicLayout } from '@/layouts';
import { RouteNameMap } from '../helpers';
import { DashboardWorkbench } from '../components';
import { ROUTE_NAME_MAP, setRouterCacheName } from '@/utils';
import { ROUTE_HOME } from '../routes';
import DashboardWorkbench from '@/views/dashboard/workbench/index.vue';
setRouterCacheName(DashboardWorkbench, ROUTE_NAME_MAP.get('dashboard_workbench'));
const DASHBOARD: CustomRoute = {
name: RouteNameMap.get('dashboard'),
name: ROUTE_NAME_MAP.get('dashboard'),
path: EnumRoutePath.dashboard,
component: BasicLayout,
redirect: { name: RouteNameMap.get('dashboard_analysis') },
redirect: { name: ROUTE_NAME_MAP.get('dashboard_analysis') },
meta: {
title: EnumRouteTitle.dashboard,
icon: Dashboard
@ -18,7 +20,7 @@ const DASHBOARD: CustomRoute = {
children: [
ROUTE_HOME,
{
name: RouteNameMap.get('dashboard_workbench'),
name: ROUTE_NAME_MAP.get('dashboard_workbench'),
path: EnumRoutePath.dashboard_workbench,
component: DashboardWorkbench,
meta: {

20
src/router/modules/document.ts
View File

@ -2,14 +2,20 @@ import { Document } from '@vicons/carbon';
import type { CustomRoute } from '@/interface';
import { EnumRoutePath, EnumRouteTitle } from '@/enum';
import { BasicLayout } from '@/layouts';
import { RouteNameMap } from '../helpers';
import { DocumentVue, DocumentVite, DocumentNaive } from '../components';
import { ROUTE_NAME_MAP, setRouterCacheName } from '@/utils';
import DocumentVue from '@/views/document/vue/index.vue';
import DocumentVite from '@/views/document/vite/index.vue';
import DocumentNaive from '@/views/document/naive/index.vue';
setRouterCacheName(DocumentVue, ROUTE_NAME_MAP.get('document_vue'));
setRouterCacheName(DocumentVite, ROUTE_NAME_MAP.get('document_vite'));
setRouterCacheName(DocumentNaive, ROUTE_NAME_MAP.get('document_naive'));
const DOCUMENT: CustomRoute = {
name: RouteNameMap.get('document'),
name: ROUTE_NAME_MAP.get('document'),
path: EnumRoutePath.document,
component: BasicLayout,
redirect: { name: RouteNameMap.get('document_vue') },
redirect: { name: ROUTE_NAME_MAP.get('document_vue') },
meta: {
requiresAuth: true,
title: EnumRouteTitle.document,
@ -17,7 +23,7 @@ const DOCUMENT: CustomRoute = {
},
children: [
{
name: RouteNameMap.get('document_vue'),
name: ROUTE_NAME_MAP.get('document_vue'),
path: EnumRoutePath.document_vue,
component: DocumentVue,
meta: {
@ -27,7 +33,7 @@ const DOCUMENT: CustomRoute = {
}
},
{
name: RouteNameMap.get('document_vite'),
name: ROUTE_NAME_MAP.get('document_vite'),
path: EnumRoutePath.document_vite,
component: DocumentVite,
meta: {
@ -37,7 +43,7 @@ const DOCUMENT: CustomRoute = {
}
},
{
name: RouteNameMap.get('document_naive'),
name: ROUTE_NAME_MAP.get('document_naive'),
path: EnumRoutePath.document_naive,
component: DocumentNaive,
meta: {

20
src/router/modules/exception.ts
View File

@ -2,14 +2,20 @@ import { ExceptionOutlined } from '@vicons/antd';
import type { CustomRoute } from '@/interface';
import { EnumRoutePath, EnumRouteTitle } from '@/enum';
import { BasicLayout } from '@/layouts';
import { RouteNameMap } from '../helpers';
import { Exception403, Exception404, Exception500 } from '../components';
import { ROUTE_NAME_MAP, setRouterCacheName } from '@/utils';
import Exception403 from '@/views/system/exception/403.vue';
import Exception404 from '@/views/system/exception/404.vue';
import Exception500 from '@/views/system/exception/500.vue';
setRouterCacheName(Exception404, ROUTE_NAME_MAP.get('exception_404'));
setRouterCacheName(Exception403, ROUTE_NAME_MAP.get('exception_403'));
setRouterCacheName(Exception500, ROUTE_NAME_MAP.get('exception_500'));
const EXCEPTION: CustomRoute = {
name: RouteNameMap.get('exception'),
name: ROUTE_NAME_MAP.get('exception'),
path: EnumRoutePath.exception,
component: BasicLayout,
redirect: { name: RouteNameMap.get('exception_403') },
redirect: { name: ROUTE_NAME_MAP.get('exception_403') },
meta: {
requiresAuth: true,
title: EnumRouteTitle.exception,
@ -17,7 +23,7 @@ const EXCEPTION: CustomRoute = {
},
children: [
{
name: RouteNameMap.get('exception_403'),
name: ROUTE_NAME_MAP.get('exception_403'),
path: EnumRoutePath.exception_403,
component: Exception403,
meta: {
@ -27,7 +33,7 @@ const EXCEPTION: CustomRoute = {
}
},
{
name: RouteNameMap.get('exception_404'),
name: ROUTE_NAME_MAP.get('exception_404'),
path: EnumRoutePath.exception_404,
component: Exception404,
meta: {
@ -37,7 +43,7 @@ const EXCEPTION: CustomRoute = {
}
},
{
name: RouteNameMap.get('exception_500'),
name: ROUTE_NAME_MAP.get('exception_500'),
path: EnumRoutePath.exception_500,
component: Exception500,
meta: {

2
src/router/modules/index.ts
View File

@ -1,4 +1,4 @@
import ROOT from './root'; // 没有子菜单的单独页面
import ROOT from './root';
import DASHBOARD from './dashboard';
import DOCUMENT from './document';
import COMPONENT from './component';

16
src/router/modules/multiMenu.ts
View File

@ -2,24 +2,26 @@ import { Menu } from '@vicons/carbon';
import type { CustomRoute } from '@/interface';
import { EnumRoutePath, EnumRouteTitle } from '@/enum';
import { BasicLayout, BasicChildLayout } from '@/layouts';
import { RouteNameMap } from '../helpers';
import { MultiMenuFirstSecond } from '../components';
import { ROUTE_NAME_MAP, setRouterCacheName } from '@/utils';
import MultiMenuFirstSecond from '@/views/multi-menu/first/second/index.vue';
setRouterCacheName(MultiMenuFirstSecond, ROUTE_NAME_MAP.get('multi-menu_first_second'));
const MULTI_MENU: CustomRoute = {
name: RouteNameMap.get('multi-menu'),
name: ROUTE_NAME_MAP.get('multi-menu'),
path: EnumRoutePath['multi-menu'],
component: BasicLayout,
redirect: { name: RouteNameMap.get('multi-menu_first') },
redirect: { name: ROUTE_NAME_MAP.get('multi-menu_first') },
meta: {
title: EnumRouteTitle['multi-menu'],
icon: Menu
},
children: [
{
name: RouteNameMap.get('multi-menu_first'),
name: ROUTE_NAME_MAP.get('multi-menu_first'),
path: EnumRoutePath['multi-menu_first'],
component: BasicChildLayout,
redirect: { name: RouteNameMap.get('multi-menu_first_second') },
redirect: { name: ROUTE_NAME_MAP.get('multi-menu_first_second') },
meta: {
keepAlive: true,
requiresAuth: true,
@ -27,7 +29,7 @@ const MULTI_MENU: CustomRoute = {
},
children: [
{
name: RouteNameMap.get('multi-menu_first_second'),
name: ROUTE_NAME_MAP.get('multi-menu_first_second'),
path: EnumRoutePath['multi-menu_first_second'],
component: MultiMenuFirstSecond,
meta: {

4
src/router/modules/root.ts
View File

@ -1,10 +1,10 @@
import type { CustomRoute } from '@/interface';
import { EnumRoutePath } from '@/enum';
import { RouteNameMap } from '../helpers';
import { ROUTE_NAME_MAP } from '@/utils';
import { ROUTE_HOME } from '../routes';
const ROOT: CustomRoute = {
name: RouteNameMap.get('root'),
name: ROUTE_NAME_MAP.get('root'),
path: EnumRoutePath.root,
redirect: { name: ROUTE_HOME.name },
meta: {

9
src/router/permission/index.ts
View File

@ -1,7 +1,6 @@
import type { Router, RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
import { useTitle } from '@vueuse/core';
import { getToken, getLoginRedirectUrl } from '@/utils';
import { RouteNameMap } from '../helpers';
import { getToken, getLoginRedirectUrl, ROUTE_NAME_MAP } from '@/utils';
/**
* 路由守卫函数
@ -30,9 +29,9 @@ function handleRouterAction(to: RouteLocationNormalized, from: RouteLocationNorm
const routerAction: [boolean, () => void][] = [
// 已登录状态跳转登录页，跳转至首页
[
isLogin && to.name === RouteNameMap.get('login'),
isLogin && to.name === ROUTE_NAME_MAP.get('login'),
() => {
next({ name: RouteNameMap.get('root') });
next({ name: ROUTE_NAME_MAP.get('root') });
}
],
// 不需要登录权限的页面直接通行
@ -47,7 +46,7 @@ function handleRouterAction(to: RouteLocationNormalized, from: RouteLocationNorm
!isLogin && needLogin,
() => {
const redirectUrl = getLoginRedirectUrl();
next({ name: RouteNameMap.get('login'), query: { redirectUrl } });
next({ name: ROUTE_NAME_MAP.get('login'), query: { redirectUrl } });
}
],
// 登录状态进入需要登录权限的页面,直接通行

19
src/router/routes/constant.ts
View File

@ -2,8 +2,11 @@ import type { RouteRecordRaw } from 'vue-router';
import { EnumRoutePath, EnumRouteTitle } from '@/enum';
import { BlankLayout } from '@/layouts';
import type { LoginModuleType } from '@/interface';
import { RouteNameMap } from '../helpers';
import { Login, NoPermission, NotFound, ServiceError } from '../components';
import { ROUTE_NAME_MAP } from '@/utils';
import Login from '@/views/system/login/index.vue';
import NoPermission from '@/views/system/exception/403.vue';
import NotFound from '@/views/system/exception/404.vue';
import ServiceError from '@/views/system/exception/500.vue';
/**
* 固定不变的路由
@ -11,10 +14,10 @@ import { Login, NoPermission, NotFound, ServiceError } from '../components';
*/
const constantRoutes: RouteRecordRaw[] = [
{
name: RouteNameMap.get('system'),
name: ROUTE_NAME_MAP.get('system'),
path: EnumRoutePath.system,
component: BlankLayout,
redirect: { name: RouteNameMap.get('not-found') },
redirect: { name: ROUTE_NAME_MAP.get('not-found') },
meta: {
keepAlive: true,
title: EnumRouteTitle.system
@ -22,7 +25,7 @@ const constantRoutes: RouteRecordRaw[] = [
children: [
// 登录
{
name: RouteNameMap.get('login'),
name: ROUTE_NAME_MAP.get('login'),
path: EnumRoutePath.login,
component: Login,
props: route => {
@ -38,7 +41,7 @@ const constantRoutes: RouteRecordRaw[] = [
},
// 403
{
name: RouteNameMap.get('no-permission'),
name: ROUTE_NAME_MAP.get('no-permission'),
path: EnumRoutePath['no-permission'],
component: NoPermission,
meta: {
@ -48,7 +51,7 @@ const constantRoutes: RouteRecordRaw[] = [
},
// 404
{
name: RouteNameMap.get('not-found'),
name: ROUTE_NAME_MAP.get('not-found'),
path: EnumRoutePath['not-found'],
component: NotFound,
meta: {
@ -58,7 +61,7 @@ const constantRoutes: RouteRecordRaw[] = [
},
// 500
{
name: RouteNameMap.get('service-error'),
name: ROUTE_NAME_MAP.get('service-error'),
path: EnumRoutePath['service-error'],
component: ServiceError,
meta: {

8
src/router/routes/routeHome.ts
View File

@ -1,11 +1,13 @@
import type { CustomRoute } from '@/interface';
import { EnumRoutePath, EnumRouteTitle } from '@/enum';
import { RouteNameMap } from '../helpers';
import { DashboardAnalysis } from '../components';
import { ROUTE_NAME_MAP, setRouterCacheName } from '@/utils';
import DashboardAnalysis from '@/views/dashboard/analysis/index.vue';
setRouterCacheName(DashboardAnalysis, ROUTE_NAME_MAP.get('dashboard_analysis'));
/** 路由首页 */
const ROUTE_HOME: CustomRoute = {
name: RouteNameMap.get('dashboard_analysis'),
name: ROUTE_NAME_MAP.get('dashboard_analysis'),
path: EnumRoutePath.dashboard_analysis,
component: DashboardAnalysis,
meta: {