Vue Router 간단 실습

페이지 Header 만들기

(라우터 연결 방법은 바로 이전 글 확인!)

components 폴더의 Header 컴포넌트

• v-for를 사용하여 navigation 만들기
• RouterLink를 사용해서 링크 걸어주기

// TheHeader.vue
<template>
  <header>
    <RouterLink v-for="nav in navigations">
      :key="nav.path"
      :to="nav.path"
    </RouterLink>
  </header>
</template>

<script>
export default {
  data() {
    return {
      navigations: [
        { path: '/', name: 'Home' },
        { path: '/movies/tt4520988', name: 'Movies~' },
        { path: '/about', name: 'About~' },
        { path: '/abc', name: 'ABC' }
      ]
    }
  }
}
</script>

영화 API로 영화 제목 출력하기

• v-for 로 각각의 영화 출력
• RouterLink의 to 속성
  컴파일 시, a 태그로 변환
  to 속성 값의 경로로 이동
  v-bind와 함께 사용하면 동적으로 경로를 만들 수 있음

// Home.vue
<template>
  <h1>Search!</h1>
  <input v-model="searchText" @keydown.enter="searchMovies" />

  <ul>
    <li v-for="movie in movies" :key="movie.imdbID">
      <RouterLink :to="`/movies/${movie.imdbID}`">
        {{ movie.Title }}
      </RouterLink>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      movies: []
    }
  },
  methods: {
    async searchMovies() {
      let res = await fetch(`https://www.omdbapi.com?apikey=${API_KEY}=${this.searchText}`)
      res = await res.json()
      console.log(res)
      // 빈배열에 api에서 가져온 search를 할당
      this.movies = res.Search
    }
  }
}
</script>

movie 페이지에 영화 포스터 출력

<template>
  <h1>{{ movie.Title }}</h1>>
  <div :style="{
    backgroundImage: `url(${requestDiffSizePoster(movie.Poster)})`
  }" class="poster"></div>
</template>

<!-- 이미지 크기가 다를때 div쓴다 -->

특이사항: 포스터를 출력하기 위해 img태그라고 막연히 생각했는데 api상에서 이미지 크기를 지정해서 불러올 수 있을때(예: 'SX300', 'SX700') img태그가 아닌 div태그를 이용하면 유용하다고 한다.

<script>
export default {
  data() {
    return {
      // 하나의 영화의 상세 정보를 가지고있는 데이터를 movie라는 이름으로 만든다.
      movie: {}
    }
  },
  created() {
    this.searchMovieDetails()
  },
  methode: {
    async searchMovieDetails() {
      let res = await fetch(`https://www.omdbapi.com?apikey=${API_KEY}=${this.$route.params.heropy}`)
      res = await res.json()
      console.log(res)
      this.movie = res
    },

    // 이미지 src 주소를 받아서, replace로 대체한다.
    // newSrc는 여기서만 사용하니까 바로 return 가능
    // src가 undefined이면 문자데이터로한다(기본값 지정) 아닐 경우 return
    requestDiffSizePoster(src = '') {
      // if (!src) return
      return src.replace('SX300', 'SX700')

    }
  }
}
</script>