404

src/router/index.js

@@ -172,7 +172,17 @@ let routes = [
 ];
 
 
-routes[2].children = [...routes[2].children,...HManagement,...SManagement,...HDrpManagement,...SDrpManagement,...WebsiteManagement,...OptionSystem]
+routes[2].children = [...routes[2].children,...HManagement,...SManagement,...HDrpManagement,...SDrpManagement,...WebsiteManagement,...OptionSystem, {
+  path: '/404',
+  name: 'notFound',
+  meta: { title: '404', ast_nav: false },
+  component: () => import(/* webpackChunkName: "error" */ '@/views/errorPage/404.vue')
+}]
+
+routes.push({
+  path: '*',
+  redirect: '/404'
+})
 
 const router = new VueRouter({
   mode: 'hash',

src/views/errorPage/404.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="error-page">
+    <div class="error-content">
+      <div class="error-icon">404</div>
+      <h2>页面不存在</h2>
+      <p>抱歉，您访问的页面不存在或已被移除</p>
+      <el-button type="primary" @click="$router.push('/home')">返回首页</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NotFound'
+}
+</script>
+
+<style scoped>
+.error-page {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f0f2f5;
+}
+.error-content {
+  text-align: center;
+}
+.error-icon {
+  font-size: 120px;
+  font-weight: bold;
+  color: #c0c4cc;
+  line-height: 1;
+}
+h2 {
+  font-size: 24px;
+  color: #606266;
+  margin: 20px 0 12px;
+}
+p {
+  font-size: 14px;
+  color: #909399;
+  margin-bottom: 24px;
+}
+</style>