添加404页面

src/components/col-header/index.tsx

@@ -47,7 +47,7 @@ export default defineComponent({
   },
   watch: {
     $route(res: any) {
-      // console.log(res)
+      console.log(res)
       this.isdark = !!res.meta.isdark
       this.navigator.forEach((item: any) => {
         item.current = false

src/router/routes-admin.ts

@@ -210,5 +210,19 @@ export default [
         meta: { title: '我关注的老师', index: 5, hidden: true, isdark: true }
       }
     ]
+  },
+  {
+    path: '/404',
+    name: '404',
+    component: () => import('@/views/404'),
+    meta: { title: '404', isdark: true }
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    component: () => import('@/views/404'),
+    meta: {
+      title: '404 Not Fund',
+      isdark: true
+    }
   }
 ]

src/views/404/index.module.less

@@ -0,0 +1,34 @@
+@keyframes slideUp {
+  0% {
+    transform: translateY(60px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.img {
+  opacity: 0;
+  animation-name: slideUp;
+  animation-duration: 0.5s;
+  animation-delay: 0.2s;
+  animation-fill-mode: forwards;
+}
+
+.tips {
+  opacity: 0;
+  animation-name: slideUp;
+  animation-duration: 0.5s;
+  animation-delay: 0.4s;
+  animation-fill-mode: forwards;
+}
+
+.btn {
+  opacity: 0;
+  animation-name: slideUp;
+  animation-duration: 0.5s;
+  animation-delay: 0.6s;
+  animation-fill-mode: forwards;
+}

src/views/404/index.tsx

@@ -0,0 +1,29 @@
+import { defineComponent } from 'vue'
+import icon404 from '@common/images/404.png'
+import { ElButton } from 'element-plus'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: '404',
+  render() {
+    return (
+      <div class="text-center py-32">
+        <img src={icon404} class={['w-[425px] h-[375px] m-auto', styles.img]} />
+
+        <p class={['pt-9 pb-6 text-xl text-[#999]', styles.tips]}>
+          抱歉，页面找不到了～
+        </p>
+
+        <ElButton
+          type="primary"
+          class={styles.btn}
+          onClick={() => {
+            this.$router.push('/')
+          }}
+        >
+          回到首页
+        </ElButton>
+      </div>
+    )
+  }
+})