[018] Vue-router 그리고 script setup

 
2024.05.31(금)
 
Vue.js 7일차

초반에 배울 것이 어떻게 배정하는지
URL이 정보가 됨 / 어느 컴포넌트가 처리할것인지 결정하는것인 라우터
 
 

---

 
원쌤의 Vue.js 퀵스타트
 

• CH01 Vue.js 소개
• CH02 Vue.js를 위한 ES6
• CH03 Vue.js 기초와 Template
• CH04 Vue 인스턴스
• CH05 이벤트 처리
• CH06 스타일 적용
• CH07 단일 파일 컴포넌트를 이용한 Vue 애플리케이션 개발
• CH08 컴포넌트 심화
• CH09 Composition API
• CH10 vue-router를 이용한 라우팅
• CH11 axios를 이용한 HTTP 통신
• CH12 vue-router와 axios를 사용한 예제
• CH13 pinia를 이용한 상태 관리

 

---

 

CH10 vue-router를 이용한 라우팅

 
 
10.1 vue-router란?
 
SPA(Single Page Application)
: 하나의 페이지 안에서 제공, 화면을 별도로 로딩하지 않음
 
10.2 vue-router의 기본 사용법
 
.router과 .route 구분 ★
: 결정하는 것
: 한 개를 의미
 
기본 골격 생성 순서:
router 객체의 등록 ... app.use(router)
→ <RouterView> ... 렌더링할 위치 지정
→  <RouterLink to="경로"> ... 화면 전환을 위한 링크 생성(<a> 태그 사용안됨)
→  프로젝트 생성시 3번째 'Add Vue...' Yes로 답변
 
Routerview도 하나의 컴포넌트지만, 변동됨
파스칼 표기법, 케밥 표기법 모두 구분하지 않고 같은 의미로 봄
ref( ) → primitive / reactive( ) → 객체(참조)
 
10.3 router 객체와 currentRoute 객체
 
컴포넌트에서 router 객체 접근하기
 
this.$router
useRouter( ) ... router 모듈을 의미함
 
currentRoute 객체의 주요 속성
- fullPath: 전체 요청 경로, 쿼리 문자열까지 포함
- path: 요청 URI 경로
- query: 쿼리 문자열 정보를 객체로!
ex) ?a=1&b=2 → {a:1, b:2}
 

---

 

JSON

 
:객체(인스턴스)의 내용을 문자열로 표현한 것
- 데이터 속성만!
- 함수, 메서드 제외, 보안 문제 때문
 
문자열은 무조건 큰따옴표로 묶어야함
 
직렬화
:Javescript 객체를 문자열로 변환하는 것
let str = JSON.srtingify(obj) ... 리턴받는 것은 문자열
전송 전 하는 작업
 
역직렬화
: JSON 문자열을 Javascript 객체로 변환하는 것
let obj = JSON.parse(str) ... 리턴받는 것은 객체
수신 후 하는 작업
 
=> 직렬화/역질렬화 작업은 통신 라이브러리(axios)에서 처리해줌
 

---

 
-2-
 

10.4 동적 라우트
 
.query, .paramas 구분 필수
> default로 문자열로 해석
 
▼ 대상이 되는 걸 불러올 때 필수임 ★

 
 
10.5 중첩 라우트
: 화면 전환없이 화면을 중첩시켜서 보아야 하는 경우
ex) const router = createRouter({
  routes : [
  ...
  {
  path: 
  children: [
   {path:
.. path 해석 방법이 다름, 라우터 안의 라우터에서 path는 부모 정보를 그대로 받아옴
 
10.6 명명된 라우트와 명명된 뷰
스킵
 
10.7 프로그래밍 방식의 라우팅 제어
 
라우터 객체의 메서드
 
- push(to)
이동 경로를 정적인 문자열을 인자로 전달 가능
2가지로 나뉘어짐 - 문자열만 넘길건지(path), 추가 정보를 전달할것인지(name:)
 
- replace(to)
현재의 히스토리를 새로운 경로로 교체
 
다음주부터 정말 중요함
 

실습

 
npm init vue 파일명
3번째 질문 Yes
npm i
npm install bootstrap@5
 
▼ 두 개 모두 생성되었는지 확인

 
▼ view 폴더명 변경

 
▼ 체크

 

 

팀활동

 
<script setup>
+ 클로저