完善搜索的相关逻辑

 <!--
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-20 13:01:08
+ * @LastEditTime: 2024-10-20 18:49:12
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @Description: 文件描述
 -->
@@ -21,7 +21,7 @@
               <el-col :span="24">
                 <div class="search">
                   <i class="el-icon-search" style="color: #00477E;"></i>&nbsp;
-                  <input placeholder="搜索" />
+                  <input placeholder="搜索" v-model="keyword" @blur="goToSearch" @keydown.enter="goToSearch"  />
                 </div>
               </el-col>
             </el-row>
@@ -289,6 +289,13 @@ export default {
       show_menu: false,
       margin_top: 0,
       // choose_country: false, // 主动选择了国家地区
+      keyword: '',
+    }
+  },
+  watch: {
+    // 监听路由参数变化时，更新输入框的值
+    '$route.query.keyword': function(newKeyword) {
+      this.keyword = newKeyword || '';
     }
   },
   mounted () {
@@ -449,6 +456,24 @@ export default {
       this.show_menu = false;
       $('body').css('overflow', 'auto');
     },
+    goToSearch () {
+      this.updateURL()
+    },
+    updateURL() {
+      const currentKeyword = this.$route.query.keyword;
+
+      // 如果输入的 keyword 和当前路由的 keyword 相同，不做更新
+      if (this.keyword === currentKeyword) return;
+
+      // 使用 Vue Router 动态更新 URL 中的 keyword 参数
+      this.$router.replace({
+        path: '/search', // 确保路径不变
+        query: {
+          ...this.$route.query, // 保留其他可能存在的 query 参数
+          keyword: this.keyword // 更新 keyword 参数
+        }
+      });
+    }
   }
 }
 </script>

 <!--
  * @Date: 2024-10-20 16:57:48
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-20 18:28:43
+ * @LastEditTime: 2024-10-20 18:50:25
  * @FilePath: /hager/src/views/search.vue
  * @Description: 文件描述
 -->
@@ -66,6 +66,11 @@ export default {
       }]
     }
   },
+  watch: {
+    '$route.query.keyword': function(newKeyword) {
+      this.keyword = newKeyword || '';
+    }
+  },
   mounted () {
   },
   methods: {