audi/app/pages/service/careprogram/nav.vue

<template>
  <div class="text--tab--layout">
    <ul>
      <li class="link--force">
        <NuxtLink :class="{ actv: actvIndex == 0 }" to="/service/careprogram/diesel"
          >디젤엔진 관련 안내</NuxtLink
        >
      </li>
      <li>
        <NuxtLink :class="{ actv: actvIndex == 1 }" to="/service/careprogram/notice"
          >환경부 차량 인증 관련 고객 안내문</NuxtLink
        >
      </li>
      <li>
        <NuxtLink :class="{ actv: actvIndex == 2 }" to="/service/careprogram/wcc"
          >We Care Campaign</NuxtLink
        >
      </li>
      <li>
        <NuxtLink :class="{ actv: actvIndex == 3 }" to="/service/careprogram/myaudinotice"
          >Audi Connect 서비스 안내</NuxtLink
        >
      </li>
      <li>
        <NuxtLink :class="{ actv: actvIndex == 4 }" to="/service/careprogram/ota"
          >자동차 전자제어장치 무선 업데이트(OTA)</NuxtLink
        >
      </li>
      <li>
        <NuxtLink :class="{ actv: actvIndex == 5 }" to="/service/careprogram/evbattery"
          >전기차 배터리 정보</NuxtLink
        >
      </li>
    </ul>
  </div>
</template>
<script setup>
  // Props 정의
  const props = defineProps({
    actvIndex: {
      type: Number,
      default: 0,
      validator: (value) => [0, 1, 2, 3, 4, 5].includes(value),
    },
  });
</script>