跳转到相应模块

src/components/layout/Footer.vue

@@ -39,9 +39,9 @@
             <div class="nav-column">
               <h3 class="section-title">关于我们</h3>
               <ul class="nav-list">
-                <li><a href="/about" class="nav-link">企业简介</a></li>
-                <li><a href="/about" class="nav-link">发展历程</a></li>
-                <li><a href="/about" class="nav-link">企业荣誉</a></li>
+                <li><a @click="goToAboutSection('about-us')" class="nav-link">企业简介</a></li>
+                <li><a @click="goToAboutSection('history')" class="nav-link">发展历程</a></li>
+                <li><a @click="goToAboutSection('qualification-section')" class="nav-link">企业荣誉</a></li>
               </ul>
             </div>
 
@@ -70,12 +70,14 @@
 
 <script>
 import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import { getCompanyInfo } from '@/api/modules/home'
 import defaultQrcode from '@assets/footer-qrcode.png'
 
 export default {
   name: 'Footer',
   setup() {
+    const router = useRouter()
     // 环境变量
     const imgHost = import.meta.env.VITE_APP_IMG_HOST
     const companyInfo = ref({})
@@ -100,15 +102,25 @@ export default {
       event.target.src = defaultQrcode
     }
 
+    // 跳转到关于我们页面的指定模块
+    const goToAboutSection = (section) => {
+      router.push({
+        name: 'About',
+        hash: `#${section}`
+      })
+    }
+
     onMounted(() => {
       fetchCompanyInfo()
     })
 
     return {
+      router,
       imgHost,
       companyInfo,
       loading,
-      handleImageError
+      handleImageError,
+      goToAboutSection
     }
   }
 }

src/pages/about/Index.vue

@@ -4,7 +4,8 @@
     <section class="banner-section">
       <img src="@assets/about-banner-s1.png" alt="" srcset="">
     </section>
-    <section class="banner-section about-us">
+    <!-- 关于我们 -->
+    <section class="banner-section about-us" id="about-us">
       <img src="@assets/about-banner-s2.png" alt="" srcset="">
 
       <!-- 数据模块 -->
@@ -35,12 +36,13 @@
         </div>
       </div>
     </section>
-    <section class="banner-section">
+    <!-- 发展历程 -->
+    <section class="banner-section history" id="history">
       <img src="@assets/about-banner-s3.png" alt="" srcset="">
     </section>
 
-    <!-- 企业资质 -->
-    <section class="qualification-section">
+    <!-- 企业资质，企业荣誉 -->
+    <section class="qualification-section" id="qualification-section">
       <div class="container">
         <!-- 标题 -->
         <div class="section-title">

src/pages/home/Index.vue

@@ -131,7 +131,7 @@
                   <h3 class="content-title">{{ activeAboutContent.title }}</h3>
                   <div class="content-description" v-html="activeAboutContent.description"></div>
                   <div class="content-action">
-                    <button class="learn-more-btn" @click="router.push({ name: 'About' })">查看更多 →</button>
+                    <button class="learn-more-btn" @click="goToAboutSection('about-us')">查看更多 →</button>
                   </div>
                 </div>
               </div>
@@ -340,6 +340,22 @@ export default {
       activeAboutTab.value = tabId
     }
 
+    // 跳转到关于我们页面的指定模块
+    const goToAboutSection = (section) => {
+      // 根据当前选中的tab决定跳转到哪个模块
+      let targetSection = section
+      if (activeAboutTab.value === 'history') {
+        targetSection = 'history'
+      } else if (activeAboutTab.value === 'qualification') {
+        targetSection = 'qualification-section'
+      }
+      
+      router.push({
+        name: 'About',
+        hash: `#${targetSection}`
+      })
+    }
+
     // 合作伙伴数据
     let partnersList = ref([])
 
@@ -580,6 +596,7 @@ export default {
       setActiveAboutTab,
       partnersList,
       goToCaseDetail,
+      goToAboutSection,
       imgHost,
       animatedNumbers,
       // 动画状态

src/router/index.js

@@ -48,9 +48,29 @@ const router = createRouter({
   routes,
   scrollBehavior(to, from, savedPosition) {
     // 如果有保存的位置（比如浏览器前进后退），则返回到保存的位置
-    // if (savedPosition) {
-    //   return savedPosition
-    // }
+    if (savedPosition) {
+      return savedPosition
+    }
+    
+    // 如果路由有hash（锚点），滚动到对应元素
+    if (to.hash) {
+      return new Promise((resolve) => {
+        // 延迟执行，确保页面内容已加载
+        setTimeout(() => {
+          const element = document.querySelector(to.hash)
+          if (element) {
+            resolve({
+              el: to.hash,
+              behavior: 'smooth',
+              top: 80 // 预留导航栏高度
+            })
+          } else {
+            resolve({ top: 0 })
+          }
+        }, 300)
+      })
+    }
+    
     // 否则滚动到页面顶部
     return { top: 0 }
   }