fix:路由处理,CSS处理，样式处理，全局变量处理

src/router/base.ts

@@ -1,42 +1,70 @@
+import { RouteRecordRaw } from 'vue-router'
 import type { AppRouteRecordRaw } from '@/router/types';
-import { ErrorPage, RedirectName, Layout } from '@/router/constant';
+import { ErrorPage404, ErrorPage403, ErrorPage500, Layout } from '@/router/constant';
+import { PageEnum } from '@/enums/pageEnum'
+
+
+export const LoginRoute: RouteRecordRaw = {
+  path: '/login',
+  name: 'Login',
+  component: () => import('@/views/login/index.vue'),
+  meta: {
+    title: '登录',
+  },
+};
+
+export const HttpErrorPage: RouteRecordRaw[] = [
+  {
+    path: '/error/404',
+    name: PageEnum.ERROR_PAGE_NAME_404,
+    component: ErrorPage404,
+    meta: {
+      title: PageEnum.ERROR_PAGE_NAME_404,
+    },
+  },
+  {
+    path: '/error/403',
+    name: PageEnum.ERROR_PAGE_NAME_403,
+    component: ErrorPage403,
+    meta: {
+      title: PageEnum.ERROR_PAGE_NAME_403,
+    },
+  },
+  {
+    path: '/error/500',
+    name: PageEnum.ERROR_PAGE_NAME_500,
+    component: ErrorPage500,
+    meta: {
+      title: PageEnum.ERROR_PAGE_NAME_500,
+    },
+  },
+]
 
 // 404 on a page
 export const ErrorPageRoute: AppRouteRecordRaw = {
   path: '/:path(.*)*',
   name: 'ErrorPage',
-  component: Layout,
+  component: ErrorPage404,
   meta: {
-    title: 'ErrorPage',
+    title: PageEnum.ERROR_PAGE_NAME_404,
     hideBreadcrumb: true,
-  },
-  children: [
-    {
-      path: '/:path(.*)*',
-      name: 'ErrorPageSon',
-      component: ErrorPage,
-      meta: {
-        title: 'ErrorPage',
-        hideBreadcrumb: true,
-      },
-    },
-  ],
+  }
 };
 
 export const RedirectRoute: AppRouteRecordRaw = {
   path: '/redirect',
-  name: RedirectName,
+  name: PageEnum.REDIRECT_NAME,
   component: Layout,
   meta: {
-    title: RedirectName,
+    title: PageEnum.REDIRECT_NAME,
   },
   children: [
     {
       path: '/redirect/:path(.*)',
-      name: RedirectName,
+      name: PageEnum.REDIRECT_NAME,
       component: () => import('@/views/redirect/index.vue'),
       meta: {
-        title: RedirectName,
+        title: PageEnum.REDIRECT_NAME,
         hideBreadcrumb: true,
       },
     },

src/router/constant.ts

@@ -1,6 +1,8 @@
-export const RedirectName = 'Redirect';
+export const ErrorPage404 = () => import('@/views/exception/404.vue');
 
-export const ErrorPage = () => import('@/views/exception/404.vue');
+export const ErrorPage403 = () => import('@/views/exception/403.vue');
+
+export const ErrorPage500 = () => import('@/views/exception/500.vue');
 
 export const Layout = () => import('@/layout/index.vue');
 

src/router/index.ts

@@ -1,9 +1,10 @@
-import type { App } from 'vue';
+import type { App } from 'vue'
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
-import { RedirectRoute } from '@/router/base';
-import { createRouterGuards } from './router-guards';
-import { PageEnum } from '@/enums/pageEnum';
+import { RedirectRoute } from '@/router/base'
+import { createRouterGuards } from './router-guards'
+import { PageEnum } from '@/enums/pageEnum'
 import modules from '@/router/modules'
+import { HttpErrorPage, LoginRoute } from '@/router/base'
 
 const RootRoute: Array<RouteRecordRaw> = [
   {
@@ -15,24 +16,15 @@ const RootRoute: Array<RouteRecordRaw> = [
       title: 'Root',
     },
     children: [
+      ...HttpErrorPage,
       modules.projectRoutes
     ]
   }
 ]
 
-export const LoginRoute: RouteRecordRaw = {
-  path: '/login',
-  name: 'Login',
-  component: () => import('@/views/login/index.vue'),
-  meta: {
-    title: '登录',
-  },
-};
 
 export const constantRouter: any[] = [LoginRoute, ...RootRoute, RedirectRoute];
 
-console.log(constantRouter)
-
 const router = createRouter({
   history: createWebHashHistory(''),
   routes: constantRouter,
@@ -42,6 +34,6 @@ const router = createRouter({
 export function setupRouter(app: App) {
   app.use(router);
   // 创建路由守卫
-  createRouterGuards(router);
+  createRouterGuards(router)
 }
 export default router

src/router/router-guards.ts

@@ -1,6 +1,5 @@
-import type { RouteRecordRaw } from 'vue-router';
 import { Router } from 'vue-router';
-import { ErrorPageRoute } from '@/router/base';
+import { PageEnum } from '@/enums/pageEnum'
 
 export function createRouterGuards(router: Router) {
   // 前置
@@ -8,14 +7,12 @@ export function createRouterGuards(router: Router) {
     const Loading = window['$loading'] || null;
     Loading && Loading.start();
 
-    //添加404
-    const isErrorPage = router.getRoutes().findIndex((item) => item.name === ErrorPageRoute.name);
+    console.log(to)
+    const isErrorPage = router.getRoutes().findIndex((item) => item.name === to.name);
     if (isErrorPage === -1) {
-      router.addRoute(ErrorPageRoute as unknown as RouteRecordRaw);
+      next({ name: PageEnum.ERROR_PAGE_NAME_404 })
     }
-
     next()
-    Loading && Loading.finish();
   })
 
   router.afterEach((to, _, failure) => {