Nav 경로 일치 및 활성화

완성된 예제의 메인페이지에서 frozen을 검색해 영화아이템을 클릭하면 영화의 상세페이지로 이동하고 위와 같이 Movie페이지가 활성화되도록 설정을 해보도록 하겠습니다.

MovieItem.vue

현재 template를 살펴보면 영화의 상세페이지를 클릭하더라도 아무런 변화가 생기지 않도록 작성되어 있습니다. 이부분을 movieItem을 클릭하면 영화의 상세페이지로 이동하도록 수정해보도록 하겠습니다.

1. RouterLink로 변경

먼저, movie라는 클래스를 가진 Div 컴포넌트를 Router라는 이름을 가지는 컴포넌트로 변경을 해주도록 하겠습니다.

<template>
  <RouterLink
    :to="`/movie/${movie.imdbID}`"
    :style="{backgroundImage: `url(${movie.Poster})`}" 
    class="movie">
    <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>

그런데 페이지는 잘 이동이 되었지만 Movie페이지가 활성화되지 않은 것을 확인할 수 있습니다. 이부분을 수정해주도록 하겠습니다.

Header.vue

정규표현식으로 /movie로 시작하는 경로의 경우 일치하겠다라고 작성을 해줍니다.

{
  name: 'Movie',
  href: '/movie/tt4520988',
  path: /^\/movie/
},

그리고 RouterLink컴포넌트 부분에다가 데이터 바인딩으로 class라는 속성을 작성해줍니다. 또한 이 class에는 active라는 클래스를 추가할 것이며, 그 액티브는 isMatch라는 메소드를 실행해 nav.path에 일치하는 데이터를 넘겨주려고 합니다.

        <RouterLink
          :to="nav.href"
          active-class="active"
          :class="{active: isMatch(nav.path)}"
          class="nav-link">
          {{ nav.name }}
        </RouterLink>

그리고 이 isMatch라는 메소드를 만들어줍니다. 이 메소드의 경우 path라는 정규표현식을 받아서 내부에서 활용을 할 것이며, 다른 객체부분에는 path라는 속성이 없을 수도 있으므로 그런 경우 false 데이터를 반환하고 그렇지 않는 경우 path라는 정규표현식에서 test라는 메소드를 통해서 this의 라우터 부분의 fullPath라는 실제 라우터부분의 주소와 정규표현식이 일치하는지를 비교하도록 만들어줍니다.

  methods: {
    isMatch(path) {
      if(!path) return false
      return path.test(this.$route.fullPath)
    }
  }
}
</script>