CNavigation.vue

<template>
  <nav class="c-navigation">
    <component
      v-for="(link, index) in links"
      exact
      active-class="-active"
      exact-active-class="-active"
      :is="link.route ? 'router-link' : 'a'"
      :to="link.route"
      :key="index"
      :class="getClasses(link)"
    >
      {{ link.text }}
    </component>
  </nav>
</template>

<script>
export default {
  props: {
    links: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getClasses (link) {
      const classes = [
        'link',
        ...link.classes || [], {
          '-active': link.active
        }
      ]
      return classes
    }
  }
}
</script>

<style lang="scss">
@import '~@style/reference.scss';

$border-color: red;
$border-color-hover: darken(red, 10%);
$border-color-active: darken(red, 20%);
$background-color: #fff;

.c-navigation {
  & {
    display: flex;
    align-items: center;
    background-color: $background-color;
  }

  & > .link {
    display: block;
    border-bottom: 2px solid $border-color;
    transition: border-bottom-color .8s ease;
  }

  & > .link:hover { border-bottom-color: $border-color-hover; }

  & > .link.-active,
  & > .link:active { border-bottom-color: $border-color-active; }
}
</style>