mod: 美化404页面

src/layout/index.vue

@@ -18,7 +18,7 @@ import AppMain from './components/AppMain.vue'
         </n-layout-header>
         <n-layout
           position="absolute"
-          content-style="padding: 0 35px 35px"
+          content-style="padding: 0 35px 35px;height: 100%;"
           style="top: 100px; background-color: #f5f6fb"
           :native-scrollbar="false"
         >

src/router/routes/index.js

@@ -51,6 +51,26 @@ export const basicRoutes = [
     ],
   },
 
+  {
+    name: 'ERROR-PAGE',
+    path: '/error-page',
+    component: Layout,
+    redirect: '/error-page/404',
+    meta: {
+      title: '错误页',
+    },
+    children: [
+      {
+        name: 'ERROR-404',
+        path: '404',
+        component: () => import('@/views/error-page/404.vue'),
+        meta: {
+          title: '404',
+        },
+      },
+    ],
+  },
+
   {
     name: 'TEST',
     path: '/test',
@@ -92,7 +112,7 @@ export const basicRoutes = [
     path: '/external-link',
     component: Layout,
     meta: {
-      title: '外链',
+      title: '外部链接',
     },
     children: [
       {

src/views/error-page/404.vue

@@ -1,3 +1,28 @@
+<script setup>
+import { NResult, NButton } from 'naive-ui'
+import { useRouter } from 'vue-router'
+
+const { replace } = useRouter()
+</script>
+
 <template>
-  <h1>404</h1>
+  <div class="page-404">
+    <n-result status="404" description="抱歉，您访问的页面不存在。">
+      <template #icon>
+        <img src="@/assets/imgs/404/404.png" width="500" />
+      </template>
+      <template #footer>
+        <n-button @click="replace('/')">返回首页</n-button>
+      </template>
+    </n-result>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.page-404 {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>