fix: 右上角头像有显示问题， 点击后恢复 #508

frontend_nuxt/components/HeaderComponent.vue

@@ -75,6 +75,7 @@ export default {
     const avatar = ref('')
     const showSearch = ref(false)
     const searchDropdown = ref(null)
+    const userMenu = ref(null)
 
     const goToHome = () => {
       router.push('/').then(() => {
@@ -128,30 +129,12 @@ export default {
       { text: '退出', onClick: goToLogout },
     ])
 
-    return {
-      isLogin,
-      isMobile,
-      headerMenuItems,
-      unreadCount,
-      goToHome,
-      search,
-      closeSearch,
-      goToLogin,
-      goToSettings,
-      goToProfile,
-      goToSignup,
-      goToLogout,
-      showSearch,
-      searchDropdown,
-    }
-  },
-
-  async mounted() {
+    onMounted(async () => {
       const updateAvatar = async () => {
         if (authState.loggedIn) {
           const user = await loadCurrentUser()
           if (user && user.avatar) {
-          this.avatar = user.avatar
+            avatar.value = user.avatar
           }
         }
       }
@@ -175,12 +158,32 @@ export default {
       )
 
       watch(
-      () => this.$route.fullPath,
+        () => router.currentRoute.value.fullPath,
         () => {
-        if (this.$refs.userMenu) this.$refs.userMenu.close()
-        this.showSearch = false
+          if (userMenu.value) userMenu.value.close()
+          showSearch.value = false
         },
       )
+    })
+
+    return {
+      isLogin,
+      isMobile,
+      headerMenuItems,
+      unreadCount,
+      goToHome,
+      search,
+      closeSearch,
+      goToLogin,
+      goToSettings,
+      goToProfile,
+      goToSignup,
+      goToLogout,
+      showSearch,
+      searchDropdown,
+      userMenu,
+      avatar,
+    }
   },
 }
 </script>