task-12(壳层/路由): 实现路由级错误页面(404 兜底)
新增 src/pages/error/NotFoundPage.vue(el-result + 返回首页),router 在业务路由 之后注册 :pathMatch(.*)* 兜底(无 menuKey,不参与权限门禁),保留壳层 chrome; main.css 增加 .not-found 布局。
This commit is contained in:
@@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="not-found">
|
||||
<el-result icon="warning" title="404" sub-title="页面不存在或已被移除">
|
||||
<template #extra>
|
||||
<el-button type="primary" @click="router.replace('/')">返回首页</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,6 +1,7 @@
|
||||
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
|
||||
import type { AdminMenuNode } from '@/types/admin'
|
||||
import AdminLayout from '@/layout/AdminLayout.vue'
|
||||
import NotFoundPage from '@/pages/error/NotFoundPage.vue'
|
||||
import { useAdminSessionStore } from '@/stores/admin-session'
|
||||
import { APP_BASE_PATH } from '@/config/app'
|
||||
import { adminRouteRecords } from './routes'
|
||||
@@ -12,10 +13,13 @@ const router = createRouter({
|
||||
{
|
||||
path: '/',
|
||||
component: AdminLayout,
|
||||
children: adminRouteRecords.map((record) => ({
|
||||
...record,
|
||||
component: defineLazyPage(record.component as () => Promise<{ default: unknown }>),
|
||||
})) as RouteRecordRaw[],
|
||||
children: [
|
||||
...adminRouteRecords.map((record) => ({
|
||||
...record,
|
||||
component: defineLazyPage(record.component as () => Promise<{ default: unknown }>),
|
||||
})),
|
||||
{ path: ':pathMatch(.*)*', component: NotFoundPage, meta: { title: '页面不存在' } },
|
||||
] as RouteRecordRaw[],
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
@@ -50,6 +50,7 @@ button, input, textarea, select { font: inherit; }
|
||||
.page-loading, .page-error { padding: 48px 20px; text-align: center; }
|
||||
.page-loading { color: var(--admin-muted); }
|
||||
.page-error { color: #b91c1c; }
|
||||
.not-found { padding: 56px 20px; }
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.admin-sidebar { flex-basis: 64px; }
|
||||
|
||||
Reference in New Issue
Block a user