// App.vue
<template>
  <Header />
  <RouterView />
</template>

<script>
import Header from "~/components/Header"

export default {
  components: {
    Header
  }
}
</script>

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

// vue-router 는 default 로 **active-class** 를 만든다. bootstrap 에서는 active 라는 class가
// 있어야 제대로 표시가 될 것이기 때문에 이걸 수정해야 한다.

// Header.vue
<template>
  <header>
    <div class="nav">
      <div
        v-for="nav in navigations"
        :key="nav.name"
        class="nav-item">
        <RouterLink
          :to="nav.href"
          class="nav-link">
          {{ nav.name }}
        </RouterLink>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      navigations: [
        {
          name:'Search',
          href:'/'
        },
        {
          name:'Movie',
          href:'/movie'
        },
        {
          name:'About',
          href:'/about'
        }
      ]
    }
  }
}
</script>

// header 부분을 수정했다. 이제 제대로 메뉴가 포커싱된다.
<template>
  <header>
    **<div class="nav nav-pills">**
      <div
        v-for="nav in navigations"
        :key="nav.name"
        class="nav-item">
        <RouterLink
          :to="nav.href"
          **active-class="active"**
          class="nav-link">
          {{ nav.name }}
        </RouterLink>
      </div>
    </div>
  </header>
</template>