fix: 添加过渡动画

src/router/index.ts

@@ -1,14 +1,16 @@
 import type { RouteObject } from 'react-router-dom'
 
 import NoFound from '@/views/404/404'
-import Login from '@/views/User/Login'
-import Register from '@/views/User/Register'
-import home from '@/views/Home/'
-import Main from '@/views/Main/'
+import Login from './modules/login/index.ts'
+import Register from './modules/register/index.ts'
+import home from './modules/home/index.ts'
+import Main from './modules/main/index.ts'
+
+import ComponentLoading from '@/components/ComponentLoading'
 const routes: RouteObject[] = [
     {
         path: '/',
-        Component: home,
+        Component: (props) => ComponentLoading(home, props),
     },
     {
         path: '*',
@@ -16,19 +18,19 @@ const routes: RouteObject[] = [
     },
     {
         path: '/register',
-        Component: Register,
-    },
-    {
-        path: '/home',
-        Component: home,
+        Component: (props) => ComponentLoading(Register, props),
     },
+    // {
+    //     path: '/home',
+    //     Component: home,
+    // },
     {
         path: '/login',
-        Component: Login,
+        Component: (props) => ComponentLoading(Login, props),
     },
     {
         path: '/main',
-        Component: Main,
+        Component: (props) => ComponentLoading(Main, props),
     },
 ]
 

src/router/modules/home/index.ts

@@ -0,0 +1,9 @@
+import { lazy } from 'react'
+
+const home = lazy(
+    () =>
+        new Promise((resolve: any) => {
+            setTimeout(() => resolve(import('@/views/Home/')), 1000)
+        }),
+)
+export default home

src/router/modules/login/index.ts

@@ -0,0 +1,9 @@
+import { lazy } from 'react'
+
+const login = lazy(
+    () =>
+        new Promise((resolve: any) => {
+            setTimeout(() => resolve(import('@/views/User/Login')), 500)
+        }),
+)
+export default login

src/router/modules/main/index.ts

@@ -0,0 +1,9 @@
+import { lazy } from 'react'
+
+const main = lazy(
+    () =>
+        new Promise((resolve: any) => {
+            setTimeout(() => resolve(import('@/views/Main')), 1000)
+        }),
+)
+export default main

src/router/modules/register/index.ts

@@ -0,0 +1,9 @@
+import { lazy } from 'react'
+
+const register = lazy(
+    () =>
+        new Promise((resolve: any) => {
+            setTimeout(() => resolve(import('@/views/User/Register')), 500)
+        }),
+)
+export default register