修改

src/router/guard.js

@@ -78,6 +78,11 @@ export const registerBeforeRouter = async (router) => {
         next('/401')
         return
       }
+      // 没有路由名称
+      if (!to.name) {
+        next('/404')
+        return
+      }
       NProgress.inc()
       // 注册了直接进入
       next()

src/router/index.js

@@ -39,16 +39,6 @@ export const constantRoutes = [
         },
         component: () => import('@/views/home/index.vue')
       },
-      {
-        path: '401',
-        component: () => import('@/views/error-page/401.vue'),
-        meta: { hidden: true }
-      },
-      {
-        path: '404',
-        component: () => import('@/views/error-page/404.vue'),
-        meta: { hidden: true }
-      },
       ...systemRoutes,
       ...userRoutes,
       {
@@ -58,6 +48,18 @@ export const constantRoutes = [
         component: () => import('@/views/account/index.vue')
       }
     ]
+  },
+  {
+    path: '/401',
+    name: '401',
+    component: () => import('@/views/error-page/401.vue'),
+    meta: { hidden: true }
+  },
+  {
+    path: '/404',
+    name: '404',
+    component: () => import('@/views/error-page/404.vue'),
+    meta: { hidden: true }
   }
 ]
 

src/views/error-page/401.vue

@@ -29,7 +29,7 @@ function back() {
     <el-button :icon="ArrowLeft" class="pan-back-btn" @click="back"> 返回 </el-button>
     <el-row>
       <el-col :span="12">
-        <h1 class="text-jumbo text-ginormous">Oops!</h1>
+        <h1 class="text-jumbo text-ginormous">401错误!</h1>
         gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
         <h2>你没有权限去该页面</h2>
         <h6>如有不满请联系你领导</h6>

src/views/error-page/404.vue

@@ -1,16 +1,3 @@
-<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
-<script>
-export default {
-  name: 'Page404'
-}
-</script>
-
-<script setup lang="ts">
-function message() {
-  return 'The webmaster said that you can not enter this page...'
-}
-</script>
-
 <template>
   <div class="wscn-http404-container">
     <div class="wscn-http404">
@@ -21,19 +8,26 @@ function message() {
         <img class="pic-404__child right" src="@/assets/images/404_cloud.png" alt="404" />
       </div>
       <div class="bullshit">
-        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__oops">404错误!</div>
         <div class="bullshit__info">
           All rights reserved
           <a style="color: #20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
         </div>
-        <div class="bullshit__headline">{{ message() }}</div>
-        <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
-        <a href="" class="bullshit__return-home">Back to home</a>
+        <div class="bullshit__headline">对不起，您正在寻找的页面不存在。尝试检查URL的错误，然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容</div>
+        <div class="bullshit__info">请检查您输入的URL是否正确，或单击下面的按钮返回主页</div>
+        <a href="/" class="bullshit__return-home">返回首页</a>
       </div>
     </div>
   </div>
 </template>
 
+<script setup>
+import { defineComponent } from 'vue'
+defineComponent({
+  name: 'Page404'
+})
+</script>
+
 <style lang="scss" scoped>
 .wscn-http404-container {
   position: absolute;