Vue 프로젝트 Nav 경로 일치 및 활성화

 

Vue 프로젝트 Nav 경로 일치 및 활성화

 

1. /src/components/MovieItem.vue 수정

- div를 RouterLink로 변경

- :to 추가

<template>
  <RouterLink
    :to="`/movie/${movie.imdbID}`"
    :style="{ backgroundImage: `url(${movie.Poster})` }"
    class="movie">
    ...
  </RouterLink>
...

 

2. /src/components/Header.vue 수정

- class 추가

- data() 수정

- methods 추가

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

<script>
...
        {
          name: 'Movie',
          href: '/movie/tt4520988',
          path: /^\/movie/ // '/movie'
        },
...
  },
  methods: {
    isMatch(path) {
      if (!path) return false
      return path.test(this.$route.fullPath)
    }
  }
}
...

 

결과

- 영화 아이템을 선택하면

- 해당 영화 상세 페이지로 이동 + 네비 활성화