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' };
+        }
+    }
 })
 
 // 路由守卫，切换页面时修改标题