officialWebsite/src/components/AppHeader.vue

<template>
  <header className="header">
    <div class="logo">
      <img src="@/assets/image/logo.png" alt="logo" />
    </div>
    <div class="tabs">
      <div
        class="tab-item"
        :class="{ active: currentTab === 'home' }"
        @click="handleTabClick('home')"
      >
        {{ t("home.nav.home") }}
      </div>
      <div
        class="tab-item"
        :class="{ active: currentTab === 'companyprofil' }"
        @click="handleTabClick('companyprofil')"
      >
        {{ t("home.nav.company") }}
      </div>
      <div
        class="tab-item"
        :class="{ active: currentTab === 'businessintroduction' }"
        @click="handleTabClick('businessintroduction')"
      >
        {{ t("home.nav.business") }}
      </div>
    </div>
  </header>
</template>
<script setup>
import { useI18n } from "vue-i18n";

import { useHome } from "@/store/home/index.js";
import { useRouter } from "vue-router";
const router = useRouter();
const { currentTab } = useHome();
const { t } = useI18n();

const handleTabClick = (tab) => {
  currentTab.value = tab;
  router.push("/" + tab);
};
</script>
<style scoped lang="scss"></style>