목록Vue (16)

영원히 남는 기록, 재밌게 쓰자

[vue3] useRouter, useRoute의 차이

학생 상세 보기 페이지를 router로 /student/:id와 같이 선언해주고 상세 페이지가 로딩될 때 id값을 가져와서 학생의 상세 정보를 가져오려고 하였다. 근데 동적으로 해당 url의 값을 가져오기 위해서는 어떻게 해야할지 찾아보다가 vue3의 composition api에서는 useRouter와 useRoute를 import해서 사용하는 방식이라고 하였다. 둘의 차이를 정리 해보았다. 우선 둘 다 Vue Router에서 제공하는 컴포저블 함수(Composable Functions)로, Composition API에서 라우터 정보를 활용하는 방법이다.컴포저블 함수: Vue 앱의 컨텍스트에서컴포저블은 Vue 컴포지션 API를 활용하여상태 저장 로직를 캡슐화하고 재사용하는 함수입니다. 함수 설명use..
Vue/Router 2025. 1. 31. 15:00
부트스트랩 설치하고 적용하기(intellij+spring boot)

https://getbootstrap.com/docs/5.3/getting-started/download/ DownloadDownload Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.getbootstrap.com부트스트랩 공식 홈페이지이다. 메인 화면으로 들어갔다면 아래와 같이 접속하여 다운로드를 눌러주면 파일이 다운로드 된다.  src/resources/static 경로에 css와 js 파일을 옮겨준다. 그래야 스프링에서는 자동으로 인식한다. index.html에 다음과 같이 사용하고 싶은 부트스..
Vue 2025. 1. 15. 21:28
Vue input태그의 데이터를 Vue가 관리하는 data() {} 로 데이터 바인딩 하는 방법

input 태그에서 입력한 데이터를 가져와 data() {}에 저장하고 싶으면 v-model을 사용하면 된다.data: () => ({ email: "", password:"", }),
Vue 2024. 6. 14. 16:47
Vue nested routes 와 push 함수

저번에 router를 사용해서 /detail을 url에 추가하여 접속하면 상세 페이지까지 들어가는 것 까지 해보았다. 그리고 router에서 :url파라미터 형식을 사용하서 /detail/0, detail/1 로 접속하여서 상세페이지마다 다른 상세 정보를 보여주도록 해보았다. 오늘 정리하고자 하는 nested routes는 /detail/0/author로 접속하면 detail내에 작가 소개란을 보여주고 /detail/0/comment로 접속하면 댓글란을 보여주도록 하는 것을 가능하게 해주는 기능에 대해 정리해보려고 한다. nested routes특정 페이지 내에서 또 라우트를 나누는 경우를 말한다.모달 창 방식으로 구현하는 방법이 있겠지만 이렇게 다른 URL로 구분 지으면 뒤로가기/ 앞으로가기 동작을 사..
Vue 2024. 6. 13. 16:40
이전 Prev 1 2 3 4 Next 다음