task-10(壳层/路由): 实现页面级异步组件加载边界

lazy-config 暴露 loading 延迟/超时/文案与懒加载判定;lazy-page 用
defineAsyncComponent 提供 loading/error 组件,router 对所有注册路由统一包裹;
main.css 增加 .page-loading/.page-error 兜底样式。
This commit is contained in:
2026-09-05 12:22:52 +08:00
parent ab7255a55b
commit f1fa5f7adf
5 changed files with 180 additions and 2 deletions
+6 -2
View File
@@ -1,9 +1,10 @@
import { createRouter, createWebHistory } from 'vue-router'
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
import type { AdminMenuNode } from '@/types/admin'
import AdminLayout from '@/layout/AdminLayout.vue'
import { useAdminSessionStore } from '@/stores/admin-session'
import { APP_BASE_PATH } from '@/config/app'
import { adminRouteRecords } from './routes'
import { defineLazyPage } from './lazy-page'
const router = createRouter({
history: createWebHistory(APP_BASE_PATH),
@@ -11,7 +12,10 @@ const router = createRouter({
{
path: '/',
component: AdminLayout,
children: adminRouteRecords,
children: adminRouteRecords.map((record) => ({
...record,
component: defineLazyPage(record.component as () => Promise<{ default: unknown }>),
})) as RouteRecordRaw[],
},
],
})