From 680317c0d2687f03129f4d0e5f31ba2b7ab0f6ba Mon Sep 17 00:00:00 2001
From: zhcnyuyang <yyydm@qq.com>
Date: Mon, 26 May 2025 00:40:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=96=E6=B6=88=E8=A1=8C=E4=B8=9A=E6=A1=88?=
 =?UTF-8?q?=E4=BE=8B=E9=87=8C=E6=AF=8F=E6=AC=A1=E9=83=BD=E5=88=B7=E6=96=B0?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ExamplesContent.vue | 37 +++++++++++++++++++++++++-----
 src/router.js                      | 15 +++++++++++-
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/components/ExamplesContent.vue b/src/components/ExamplesContent.vue
index a3c0b5b..45f5e80 100644
--- a/src/components/ExamplesContent.vue
+++ b/src/components/ExamplesContent.vue
@@ -2,21 +2,36 @@
 <!--<div class="pageroot" style="background-color: white;">-->
   <div v-if="this.error==null" id="examplelist">
     <div id="typegrid">
-      <a href="/Examples" style="text-decoration: none;">
+<!--      <a href="/Examples" style="text-decoration: none;">-->
+<!--        <div class="typebar"-->
+<!--             :class="{-->
+<!--                active: (!$route.query.type || $route.query.type === '')}">-->
+<!--          全部-->
+<!--        </div>-->
+<!--      </a>-->
+<!--      <a v-for="(item, index) in this.types"-->
+<!--                   :key="index":href="`/Examples?type=${item}`"-->
+<!--                   style="text-decoration: none;">-->
+<!--        <div class="typebar"-->
+<!--             :class="{ active: ($route.query.type === item)}">-->
+<!--          {{item}}-->
+<!--        </div>-->
+<!--      </a>-->
+      <router-link to="/Examples" style="text-decoration: none;">
         <div class="typebar"
              :class="{
                 active: (!$route.query.type || $route.query.type === '')}">
           全部
         </div>
-      </a>
-      <a v-for="(item, index) in this.types"
-                   :key="index":href="`/Examples?type=${item}`"
-                   style="text-decoration: none;">
+      </router-link>
+      <router-link v-for="(item, index) in this.types"
+         :key="index":to="{ name: 'Examples', query: {type:item} }"
+         style="text-decoration: none;">
         <div class="typebar"
              :class="{ active: ($route.query.type === item)}">
           {{item}}
         </div>
-      </a>
+      </router-link>
     </div>
     <!--列表-->
     <div id="listmain">
@@ -124,6 +139,16 @@ export default {
   mounted() {
     this.fetch_types();
     this.fetch_items();
+  },
+  watch: {
+    // 监听路由的 query 对象
+    '$route.query.type': function(newType, oldType) {
+      // 当 type 参数变化时，重新获取列表项
+      // 确保在组件仍然是 Examples 页面时才执行
+      if (this.$route.name === 'Examples') {
+        this.fetch_items();
+      }
+    }
   }
 }
 </script>
diff --git a/src/router.js b/src/router.js
index 34af162..1fd8f5c 100644
--- a/src/router.js
+++ b/src/router.js
@@ -63,7 +63,20 @@ const routes= [
 
 const router = createRouter({
     history: createWebHistory(),
-    routes
+    routes,
+    scrollBehavior(to, from, savedPosition) {
+        // 如果有保存的滚动位置 (例如，当用户点击浏览器的后退/前进按钮时)，则恢复该位置
+        if (savedPosition) {
+            return savedPosition;
+        } else {
+            // 如果目标路由和来源路由都是 Examples，则不改变滚动位置
+            if (to.name === 'Examples' && from.name === 'Examples') {
+                return false; // 保持当前滚动位置
+            }
+            // 否则，滚动到页面顶部
+            return { top: 0, left: 0, behavior: 'instant' };
+        }
+    }
 })
 
 // 路由守卫，切换页面时修改标题