article thumbnail image
Published 2022. 11. 14. 21:15

views/DetailView.vue 코드 확인

  • 게시글 상세 정보를 표현할 컴포넌트
  • AJAX 요청으로 응답 받아올 article의 상세 정보들을 표현

 

router/index.js

  • id를 동적 인자로 입력 받아 특정 게시글에 대한 요청

 

components/ArticleListItem.vue

  • router-lick를 통해 특정 게시글의 id 값을 동적 인자로 전달
  • 게시글 상세 정보를 Server에 요청

 

views/DetailView.vue 코드 확인

  • this.$route.params를 활용해 컴포넌트가 create될 때, 넘겨받은 id로 상세 정보 AJAX 요청

  • 게시글 상세 정보 요청 결과 확인
  • 넘겨 받은 데이터 구조 확인 후, 적절하게 화면 구성
  • 응답 받은 정보를 data에 저장
  • data에 담기까지 시간이 걸리므로 optional chaining을 활용해 데이터 표기

 

복사했습니다!