반응형
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
Vue.js - The Progressive JavaScript Framework
v2.vuejs.org
반응형
'개발 > vue' 카테고리의 다른 글
countdown timer 설정 (0) | 2024.08.20 |
---|---|
Vue 3.0에서 타입스크립트 사용하기 (0) | 2023.10.11 |