Vue3 (사이트 제작 2)

Header 제작

components 폴더안에 Header.vue를 만든다.
템플릿안에서 nav를 제작할건데 bootstrap을 이용하여 제작한다는걸 명심하고 만든다.
RouterLink 는 vue에서 제공하는 a태그랑 비슷한거다.
부모요소가 3번 반복될꺼기 때문에 v-for를 만들어서 navigations이랑 연결하고 nav로 이름을 사용할것이다.
key로 nav.name을 연결하여 navugations에서 name을 들고온다.
RouterLink 는 to로 href를 지정해주고 active-class는 부트스트랩을 이용하여 active를 class로 연결한다.
{{ nav.name }} 을 출력하여 메뉴의 이름이 나올수있도록 제작!

Header.vue

<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>

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

App.vue

App.vue에서도 import를 통해 만든 컴포넌트를 연결하는 작업을진행한다.

<template>
  <Header />
  <RouterView />
</template>

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

export default {
  components: {
    Header
  }
}

</script>

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