在router目录中添加如下配置
// // 配置路由信息
import {Navigate } from "react-router-dom"
import {lazy,Component, Suspense } from "react"
import { JSX } from 'react/jsx-runtime'// 懒加载模式需要使用loding
const Layout=lazy(()=>import("@/layout/index"))const Home = lazy(()=>(import("@/pages/home")))
const Page404=lazy(()=>(import("@/pages/404/index")))// 设置
const Systemset = lazy(()=>(import("@/pages/systemSet/index")))
const Citytree = lazy(()=>(import("@/pages/systemSet/cityTree/index")))
// 登录
const Login=lazy(()=>import("@/pages/login/index"))// 充电桩管理
const ChargManage=lazy(()=>(import("@/pages/chargingManagement/index")))
// 充电站管理
const ChargMangeList=lazy(()=>import("@/pages/chargingManagement/list/index"))
// 添加充电站
const AddChargingStation=lazy(()=>import("@/pages/chargingManagement/list/addCharging"))
// 充电桩
const ChargStation=lazy(()=>import("@/pages/chargingManagement/chargingStation/index"))
// 添加充电桩
const AddChargStation=lazy(()=>import("@/pages/chargingManagement/chargingStation/addCharging"))
// vr信息
const Vrfile=lazy(()=>import("@/pages/chargingManagement/vrFile/index"))
// 评价
const Evaluate=lazy(()=>import("@/pages/chargingManagement/evaluate/index"))
// 用户管理
const User=lazy(()=>import("@/pages/user/index"))
const UserList=lazy(()=>import("@/pages/user/list/index"))// <Suspense>占位组件
/*当懒加载组件还没有加载出来的时候，先用占位组件显示。里面有一个属性fallback，
里面传进去的组件就是占位组件。有<Suspense>表示该组件懒加载出来的，决定是否懒加载出来的看是不是React.lazy().*/
const withLoading=(somp:JSX.Element)=>(<Suspense fallback={<div>加载中...</div>}>{somp}</Suspense>
)interface rout{path:string,element:Component,label:"",children?:Array<any>
}
export interface routerInterfase extends rout{}
const RourterData:Array<any>=[{path: '/',element:<Navigate to='/home'></Navigate>, //路由重定，默认会跳转到/home路由下label:"首页",meta:{title:"首页"}},{path: '/',// <AutnToken><Layout></Layout></AutnToken>element:<Layout></Layout>,label:"首页",meta:{title:"首页"},children:[{path:'/home',element:withLoading(<Home></Home>),// element:<Home></Home>,label:"首页",meta:{title:"首页"}},{path:'/chargingStation',element:withLoading(<ChargManage></ChargManage>),label:"充电站管理",meta:{title:"充电站管理"},children:[{path:'/chargingStation/list',element:withLoading(<ChargMangeList></ChargMangeList>),label:"充电站列表",meta:{title:"充电站列表"}},{path:'/chargingStation/addCharginns',element:withLoading(<AddChargingStation></AddChargingStation>),label:"添加充电站",},{path:'/chargingStation/chargingPile',element:withLoading(<ChargStation></ChargStation>),label:"充电桩列表",meta:{title:"充电桩列表"}},{path:'/chargingStation/addCharginnsStation',element:withLoading(<AddChargStation></AddChargStation>),label:"添加充电桩",},{path:'/chargingStation/varfile',element:withLoading(<Vrfile></Vrfile>),label:"vr信息",},{path:'/chargingStation/evaluate/:id',element:withLoading(<Evaluate></Evaluate>),label:"评价管理",}]},{path:'/user',element:withLoading(<User></User>),label:"用户管理", children:[{path:'/user/list',element:withLoading(<UserList></UserList>),label:"用户列表",meta:{title:"用户列表"}}]},{path:'/systemSet',element:withLoading(<Systemset></Systemset>),label:"设置",meta:{title:"设置"},children:[{path:'/systemSet/list',element:withLoading(<Citytree></Citytree>),label:"区域管理",meta:{title:"区域管理"}}]}]},{path: '/login',element:<Login></Login>,label:"登录"},{path: '*',element:<Page404></Page404>,label:"404"},
]export default RourterData;
- 使用懒加载lazy（） 添加路由
- Suspense 懒加载组件在加载不出来的时候显示的内容
- 需要再每层的路由配置中添加不然就会闪屏
