[vue-router] router-link 가 한 번만 동작하고 이후 동작하지 않는 경우

Navi.vue

<div id="nav">
      <RouterLink to="/">Home</RouterLink>
      <RouterLink 
        v-for="dest in destinations"
        :key="`nav${dest.id}`"
        :to="{name: 'destination', params: {slug: dest.slug}}"
      >
        {{ dest.name }}
      </RouterLink>
  </div>

 

Home.vue

<template>
  <div class="home">
    <h1>All Destinations</h1>
    <div class="destinations">
      <RouterLink
          v-for="dest in destinations"
          :key="dest.id"
          :to="{name: 'destination', params: {slug: dest.slug}}"
      >
        <h2>{{ dest.name }}</h2>
        <img :src="`/images/${dest.image}`" :alt="dest.name"/>
      </RouterLink>
    </div>
  </div>
</template>

 

App.vue

<template>
<Navi />
  <div class="container">
      <RouterView :key="$route.fullPath"></RouterView>
  </div>
</template>

 

 

routes/index.ts

const routes: Array<RouteRecordRaw> = [
  {name: 'home', path: '/', component: Home},
  {name: 'destination', path: '/destination/:slug', component: () => import ('@views/destination.vue')}
];

 

Navi.vue 와 Home.vue 에서 동일한 RouterLink 코드를 사용한 상황인데

Home.vue 에서 각 route-link 클릭했을 경우는 라우트 이동이 되어 destination.vue 가 업데이트 되나 navie.vue 에서 클릭한 경우는

처음 한 번만 라우트 이동되고 navi.vue 상의 다른 링크를 클릭해도 더 이상 화면이(destination.vue) 가 업데이트 되지 않습니다. 

 

 

이 문제는 Vue Router와 관련된 몇 가지 잠재적인 문제에서 발생할 수 있습니다.

아래는 원인을 확인하고 해결 방법을 제시하는 단계입니다. 

 

Vue에서 같은 라우트 컴포넌트를 다시 로드하지 않는 경우는 다음과 같은 이유 때문일 수 있습니다:

1. 동일한 컴포넌트를 재활용: Vue Router는 동일한 컴포넌트를 재활용하여 성능을 최적화합니다.

2. 라우트 변경 시 컴포넌트 업데이트 누락: 데이터 또는 뷰가 제대로 갱신되지 않을 수 있습니다.

 

라우트 컴포넌트에서 key 사용:

key 속성을 동적으로 설정하면 Vue는 라우트가 변경될 때마다 컴포넌트를 다시 렌더링합니다.

<RouterView :key="$route.fullPath"></RouterView>

 

이렇게 하면 라우트가 변경될 때마다 새로운 컴포넌트 인스턴스가 생성됩니다.

 

동적인 컴포넌트를 재활용하려는 의도에는 부합되지 않지만 문제는 해결됩니다.

destination.vue 는 api 의 응답에 따라 동일한 컴포넌트에서 다른 화면이 렌더링 되어야 하는데 실상 그 부분을 활용하지는 못하는 방법 같습니다.

 

조금 더 정확한 원인은 RouterLink 와 RouterView 가 동일한 컨텍스트에 있지 않아서 인 것 같습니다.