[Vue.js][Ch4][영화검색 사이트] Header - Nav

참고

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

class가 nav-item인

li 태그가 반복된 구조이다.

 

 

 

 

 

 

 

 

 

 

 

Header - navigation 

1. components > Header.vue 작성

- 페이지의 name과 href 데이터가 존재하는 navigations 배열 생성 +  v-for 반복문을 이용해 navigation 출력

<template>
  <header>
    <div class="nav nav-pills">
      <div 
        v-for="nav in navigations" 
        :key="nav.name"
        class="nav-item">
        <!-- RouterLink 
            - vue-router에서는 페이지 이동할 수 있는 a 태그 대신에 RouterLink라는 컴포넌트를 제공
            - a 태그의 href와 같은 기능으로 to라는 속성을 제공
            - RouterLink는 현재 페이지에 어떤 navigation이 활성화되었는지 확인할 수 있음 
            => active-class을 이용해 RouterLink에 active를 추가 -->
        <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: 'Movie',
          href: '/movie'
        },
        {
          name: 'About',
          href: '/about'
        }
      ]
    }
  }
}
</script>

RouterLink

• 페이지를 이동할 수 있는 a 태그 대신에 vue-router에서는 RouterLink라는 컴포넌트를 제공한다. 
• a 태그로 변환되어 출력된다.
• RouterLink는 현재 페이지에 어떤 navigation이 활성화되었는지 확인할 수 있다.
• a 태그의 href와 같은 기능으로 to 라는 속성을 제공한다.

active-class

활성 상태인 a 태그에 적용할 클래스를 지정한다.

• Type: string
• Default: "router-link-active" (or global linkActiveClass)

따라서, active-class를 이용해  RouterLink에 active를 추가한다.

2. App.vue 컴포넌트에 Header.vue 컴포넌트 연결

<template>
  <Header />
  <!-- 페이지가 바뀔때마다 바뀌는 페이지는 RouterView에서 출력 -->
  <RouterView />  <!-- vue-router 패키지에서 제공하는 전체 영역에서 쓸 수 있는 RouterView 컴포넌트 사용 -->
</template>

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

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

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

</style>

RouterView : 전체 영역에서 쓸 수 있는 컴포넌트로 페이지가 바뀔때마다 바뀌는 페이지는 RouterView이다.

출력