通用Header基本完成

src/apis/login.js

@@ -8,3 +8,12 @@ export const login = (data) => {
         data,
     });
 };
+
+export const logout = () => {
+    return request(
+        {
+            url: 'logout',
+            method: 'get'
+        }
+    )
+}

src/i18n/language/en.js

@@ -3,6 +3,8 @@ export default {
     personnalCenter: "Personal Center",
     login: "Login",
     logout: "Exit",
+    tips404: "Sorry, Page Not Found!",
+    backHome: "Back to HomePage",
     form: {
         username: "Username",
         usernameHolder: "Please enter your username.",

src/i18n/language/zh-cn.js

@@ -3,6 +3,8 @@ export default {
     personalCenter: "个人中心",
     login: "登录",
     logout: "退出",
+    tips404: "对不起！页面找不到了......",
+    backHome: "返回首页",
     form:{
         username: "用户名",
         usernameHolder: "请输入用户名",

src/layout/components/PageHeader.vue

@@ -55,9 +55,11 @@
 import {Message} from '@element-plus/icons-vue'
 import {useI18n} from "vue-i18n";
 import {ref} from 'vue';
+import {computed} from 'vue'
 import {useRouter} from "vue-router";
 import router from "@/router/index.js";
 import store from "@/store/index.js";
+import {logout} from "@/apis/login.js";
 import user from "@/store/modules/user.js";
 // import {useStore} from "vuex";
 
@@ -83,6 +85,13 @@ const commands = {
   },
   toLogout: () => {
     console.log('退出')
+    logout().then(res => {
+      if (res.code == 200) {
+        store.commit('user/clearToken')
+        store.commit('user/clearUserInfo')
+        router.push('/login')
+      }
+    })
   }
 }
 

src/views/404.vue

@@ -1,11 +1,28 @@
+<template>
+  <div class="font-lg">404</div>
+  <div class="font-sm">{{ t('tips404') }}</div>
+  <p class="txt-c">
+    <el-button type="text" @click="$router.push('/')">{{ t('backHome') }}</el-button>
+  </p>
+</template>
+
 <script setup>
+import {useI18n} from "vue-i18n";
 
-</script>
+const {t} = useI18n();
 
-<template>
+</script>
-  <h1>这是404页面</h1>
-</template>
 
 <style scoped>
-
+.font-lg {
+  margin-top: 40px;
+  font-size: 150px;
+  font-weight: bold;
+  text-align: center;
+  color: var(--el-color-primary);
+}
+.font-sm {
+  font-size: 26px;
+  text-align: center;
+}
 </style>