[Vue] Component 재사용

export default {
    path: '/test',
    component: () => Layout,
    children: [
        {path: 'path1', component: () => Listcomponent},
        {path: 'path2', component: () => Listcomponent},
    ]
}

path만 다르게 해서 하나의 컴포넌트를 재사용할 때, 컴포넌트가 업데이트되지 않는 문제 발생.

 

  <router-view  :key="$route.fullPath"/>

router-view에 key 속성을 추가하여 path로 컴포넌트를 식별하도록 해줌으로써 해당 컴포넌트를 동일요소가 아닌 다른 요소로 인식하여 컴포넌트 데이터가 업데이트된다.

 

key는 이름답게 고유해야만 렌더링 오류를 방지할 수 있다.

 

key 속성 참고..

https://v2.vuejs.org/v2/api/#key

API — Vue.js