Vue로 개발 중 배포 환경에서 컴포넌트 업데이트 안되는 문제

Question

안녕하세요. Vue.js로 프론트엔드 앱을 개발중에 있습니다. 게시글 목록을 페이지네이션하기 위해 게시글 목록을 조회하는 페이지 (/boards)에 querystring으로 page를 넘겨주어 이를 props로 받고 있습니다. 예를 들어 /boards?page=3과 같은 형태로 만들어지고, 페이지네이션을 위해 페이지 넘버를 클릭하면 해당 경로로 라우팅되도록 하고 있습니다. 문제는 개발환경에서는 props를 받아와서 게시글 목록이 업데이트되는 과정이 모두 문제없이 실행이 되는데, 배포한 상태에서는 props를 감지하는 watch가 동작하질 않길래 아래와 같이 onBeforeUpdate()를 호출해보니, 만약 1 -> 3 -> 2 -> 4 순으로 페이지넘버를 클릭할 경우 다음과 같이 출력이 됩니다... 혹시 관련 내용에 있어서 해결 방법을 알고 계시거나 예상되는 부분이 존재하면 의견 주시면 감사드리겠습니다.. 제가 찾아본 글 중에 관련된 내용은 https://github.com/vuejs/core/issues/7688 이 글이 제일 유력한거 같은데 이 글 내용대로라면 수정된 문제일 것으로 보여서.. 도무지 해결방법을 모르겠습니다 ㅠonBeforeUpdate(() => { const vnodeProps = getCurrentInstance()?.vnode.props; console.info('page', `${props.page} -> ${vnodeProps.page}`) })(콘솔 출력 결과)page 1 -> 3 page 1 -> 2 page 1 -> 4(라우터 정보를 담은 router/index.js)const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/boards', name: 'board', component: Board, props: route => ({page: route.query.page}) }, ] }) export default router;(BoardListComponent.vue)

Kunie · Answer

Vue로 개발 중 배포 환경에서 컴포넌트 업데이트 안되는 문제

1개의 답변

#vue3 목록