修复 tabs 点击切换

src/components/Header.vue

 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import Swiper from 'swiper'
 import { Navigation, Pagination, Autoplay } from 'swiper/modules'
 import 'swiper/css'
 import 'swiper/css/pagination'
 import 'swiper/css/navigation'
 
+const router = useRouter()
+const route = useRoute()
+
+const navItems = [
+  { name: '首 页', path: '/' },
+  { name: '产品技术', path: '/products' },
+  { name: '客户名录', path: '/customers' },
+  { name: '新闻资讯', path: '/news' },
+  { name: '加入我们', path: '/join' },
+  { name: '关于我们', path: '/about' }
+]
+
+const handleNavClick = (path: string) => {
+  router.push(path)
+}
+
 onMounted(() => {
   new Swiper('.swiper-container', {
     modules: [Navigation, Pagination, Autoplay],
@@ -31,12 +48,14 @@ onMounted(() => {
     <div class="center-width header-top">
       <i class="logo"></i>
       <ul class="navigation">
-        <li class="active">首 页</li>
-        <li>产品技术</li>
-        <li>客户名录</li>
-        <li>新闻资讯</li>
-        <li>加入我们</li>
-        <li>关于我们</li>
+        <li 
+          v-for="item in navItems" 
+          :key="item.path"
+          :class="{ active: route.path === item.path }"
+          @click="handleNavClick(item.path)"
+        >
+          {{ item.name }}
+        </li>
       </ul>
       <div style="clear: both;"></div>
     </div>
@@ -65,4 +84,8 @@ onMounted(() => {
   width: 100%;
   overflow: hidden;
 }
+
+.navigation li {
+  cursor: pointer;
+}
 </style> 
\ No newline at end of file