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

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

View File

@ -1,6 +1,6 @@
// import { computed } from 'vue';
// import { useRoute } from 'vue-router';
// import { RouteNameMap } from '@/router';
// import { ROUTE_NAME_MAP } from '@/utils';
export default function useRouteParam() {
// const route = useRoute();

View File

@ -1,7 +1,7 @@
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { EnumRoutePath } from '@/enum';
import { RouteNameMap } from '@/router';
import { ROUTE_NAME_MAP } from '@/utils';
export default function useRouteQuery() {
const route = useRoute();
@ -9,7 +9,7 @@ export default function useRouteQuery() {
/** 登录跳转链接 */
const loginRedirectUrl = computed(() => {
let url: EnumRoutePath | undefined;
if (route.name === RouteNameMap.get('login')) {
if (route.name === ROUTE_NAME_MAP.get('login')) {
url = (route.query?.redirectUrl as EnumRoutePath) || '';
}
return url;

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 };

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 };

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 };

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 };

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 };

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';

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 };

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 };

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 };

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 };

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;

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: {

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: {

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: {

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: {

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';

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: {

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: {

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 } });
}
],
// 登录状态进入需要登录权限的页面,直接通行

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: {

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: {

View File

@ -29,4 +29,11 @@ export {
clearSession
} from './storage';
export { getRouteNameMap, setRouterCacheName, getLoginRedirectUrl } from './router';
export {
ROUTE_NAME_MAP,
setRouterCacheName,
getLoginRedirectUrl,
setSingleRoute,
getCacheRoutes,
transformRouteToMenu
} from './router';

View File

@ -0,0 +1,47 @@
import type { Component } from 'vue';
import { EnumRoutePath } from '@/enum';
import type { RoutePathKey, CustomRoute } from '@/interface';
import { router } from '@/router';
/** 获取路由name map */
function getRouteNameMap() {
return new Map<RoutePathKey, RoutePathKey>((Object.keys(EnumRoutePath) as RoutePathKey[]).map(v => [v, v]));
}
/** 路由名称 */
export const ROUTE_NAME_MAP = getRouteNameMap();
/** 给需要缓存的页面组件设置名称 */
export function setRouterCacheName(component: Component, name?: string) {
if (name) {
Object.assign(component, { name });
}
}
/** 获取登录后的重定向地址 */
export function getLoginRedirectUrl() {
const path = router.currentRoute.value.fullPath as EnumRoutePath;
const redirectUrl = path === EnumRoutePath.root ? undefined : path;
return redirectUrl;
}
/**
*
* @param route -
* @param notFoundName - 404
* @param container -
*/
export function setSingleRoute(container: Component, route: CustomRoute) {
const routeItem: CustomRoute = {
name: `${route.name as string}_`,
path: `${route.path}_`,
component: container,
redirect: { name: ROUTE_NAME_MAP.get('not-found') },
meta: {
isNotMenu: true
},
children: [route]
};
return routeItem;
}

View File

@ -1,23 +1,3 @@
import type { Component } from 'vue';
import { EnumRoutePath } from '@/enum';
import type { RoutePathKey } from '@/interface';
import { router } from '@/router';
/** 获取路由name map */
export function getRouteNameMap() {
return new Map<RoutePathKey, RoutePathKey>((Object.keys(EnumRoutePath) as RoutePathKey[]).map(v => [v, v]));
}
/** 给需要缓存的页面组件设置名称 */
export function setRouterCacheName(component: Component, name?: string) {
if (name) {
Object.assign(component, { name });
}
}
// 获取登录后的重定向地址
export function getLoginRedirectUrl() {
const path = router.currentRoute.value.fullPath as EnumRoutePath;
const redirectUrl = path === EnumRoutePath.root ? undefined : path;
return redirectUrl;
}
export { ROUTE_NAME_MAP, setRouterCacheName, getLoginRedirectUrl, setSingleRoute } from './helpers';
export { default as getCacheRoutes } from './cache';
export { default as transformRouteToMenu } from './menus';