[Vue.js][Ch4][영화검색 사이트] Nav 경로 일치 및 활성화

1. MovieItem.vue > 영화 포스터 클릭하면 상세페이지로 이동할 수 있게 수정

<template>
  <!-- 배경으로 영화 포스터를 출력, 내부에 영화 정보 출력 -->
  <RouterLink
    :to="`/movie/${movie.imdbID}`"
    :style="{ backgroundImage: `url(${movie.Poster})` }"
    class="movie">
    <!-- imageLoading이 true일 때, Loader 출력
    / size = 1.5 : size는 1.5rem 
    / absolute = true : 부모 요소(div)의 가운데에 배치 -->   
    <Loader
      v-if="imageLoading"
      :size="1.5"
      absolute />
    <div class="info">
      <div class="year">
        {{ movie.Year }}
      </div>
      <div class="title">
        {{ movie.Title }}
      </div>
    </div>
  </RouterLink>
</template>

• 영화 이미지에 해당하는 div -> RouterLink 컴포넌트로 변경
• 영화 상세 페이지로 이동되게 to 속성 사용 

2. Movie 네비게이션이 활성화할 수 있도록 Header.vue 수정

<template>
  <header>
    <Logo />
    <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를 추가 
            - nav.path가 일치하면 active 클래스 추가 -->
        <RouterLink 
          :to="nav.href" 
          :class="{ active: isMatch(nav.path) }"
          active-class="active"
          class="nav-link">
          {{ nav.name }}
        </RouterLink>
      </div>
    </div>
  </header>
</template>

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

export default {
  components: {
    Logo
  },
  data() {
    return {
      navigations: [
        {
          name: 'Search',
          href: '/'
        },
        {
          name: 'Movie',
          href: '/movie/tt4520988',   // tt4520988 : 겨울왕국2 영화 ID
          path: /^\/movie/            // /movie로 시작하는 경로인 경우, 일치(정규표현식 사용)
        },
        {
          name: 'About',
          href: '/about'
        }
      ]
    }
  },
  methods: {
    isMatch(path) {
      if(!path) return false;   // path가 없으면 매치 안할거다!(false)
      return path.test(this.$route.fullPath);   // 실제 url 주소가 정규표현식과 일치하는지 확인
    }
  }
}
</script>

<style lang="scss" scoped>
header { 
  height: 70px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  .logo {
    margin-right: 40px;
  }
}
</style>

• navigations > name이 Movie인 객체에 path 속성 추가
  • path: /^\/movie/  (정규표현식 추가)
• isMatch 메소드 추가
  • navigations에 path 데이터가 없으면 false 반환
  • path 데이터가 있으면 실제 url 주소가 path 정교표현식이 일치하는지 비교
• RouterLink > nav.path가 일치하면 active 클래스 추가

출력

 

영화 목록에서 영화 선택하면 상세 페이지로 이동 + 네비게이션의 Movie > active 처리됨