v-router 2

vue v-router 통해 타 페이지 호출 방법 및 데이터 전달 방법 #15

Vue에서 v-router를 사용하여 다른 페이지로 이동하고 데이터를 전달하는 방법을 설명한다.이 예제에서는 국회도서관 자료검색 화면을 개발하며 적용된 내용을 기반으로 설명한다. ✅ Vue Router란? Vue Router는 Vue.js에서 페이지 간 이동(라우팅)을 담당하는 공식 라이브러리이다.단일 페이지 애플리케이션(SPA)에서 원활한 네비게이션을 제공하며, 동적 라우팅 기능을 지원한다. ✅ Vue Router 설치 Vue CLI 프로젝트에서 Vue Router를 설치하려면 아래 명령어를 실행한다.npm install vue-router 이전에 Vue Router와 Vuetify를 함께 설치하는 방법을 다뤘으니, 필요하면 참고한다.📌 이전 글 보기 vue router, vuetify 설치하기 #1..

국회도서관 자료 검색 vue.js 화면 스케치 #14

국회도서관 도서검색은 5개의 흐름으로 진행한다.검색어 입력검색어로 국회도서관 도서검색 API 호출도서검색된 결과 리스트 노출특정 도서 클릭클릭된 도서의 상세정보 노출5개의 흐름을 3개의 페이지로 구성한다.SearchMain.vue검색 메인 페이지검색어 입력 ▶ 1번 흐름 진행vue router 활용하여 페이지 호출ResultList.vue검색결과 리스트검색어로 국회도서관 도서검색 API 호출 ▶ 2번 흐름 진행도서검색된 결과 리스트 노출 ▶ 3번 흐름 진행axios 모듈 이용하여 API 호출ResultDtl.vue상세 도서 정보특정 도서 클릭 ▶ 4번 흐름 진행클릭된 도서의 상세정보 노출 ▶ 5번 흐름 진행modal 팝업으로 노출vuetify의 data tables component로 개발화면 구성 스케..