1. Routing
- 네트워크에서 경로를 선택하는 프로세스
- ex) django⇒ SSR방식!
URL요청 → view 함수를 통해서
articles/index/에 접근하면 index에 대한 결과를 보내줌
📢
그렇다면… SPA/CSR방식에서는?
- 서버는 하나의 HTML(index.html) 만을 제공하고
- 이후에는 하나의 HTML 문서 위에서 JS 코드를 활용!
- axios와 같은 AJAX 요청을 보낼 수 있는 도구를 사용해서 데이터를 가져오고 처리한다.
- ⇒ 즉 하나의 URL에서 지지고 볶고 한다.
❓
then.. Why I need routing?
- UX의 관점에서! 사용자가 URL을 통한 변화를 감지 할 수 없다!!
- 링크 공유 할 때 처음 페이지만 공유 가능
- 브라우저의 뒤로 가기 기능을 사용할 수 없음.
❓
How can I use routing in Vue?
2. Vue Router
- Vue의 공식 라우터
- SPA 상에서 라우팅을 쉽게 개발할 수 있는 기능을 제공
- 라우트에 컴포넌트 매핑한 후, 어떤 URL에서 렌더링 할 지 알려줌
- URL이 변경되지 않는 문제 해결
📢
즉, 페이지는 하나인데! 마치 여러개의 페이지로 구성된 애플리케이션(MPA) 처럼 느끼게 만들어 준다.
1. Vue Router 시작하기
$ vue create vue-router-app
$ cd vue-router-app
vue add router
2. router-link
- a 태그와 비슷한 기능 → URL 이동시킴
- but 브라우저가 페이지를 다시 로드 하지 않도록 함
- 목표 경로는 ‘to’ 속성으로 지정 됨
3. router-view
- 주어진 URL에 대해 일치하는 컴포넌트를 렌더링 하는 컴포넌트
- 실제 component가 DOM에 부착되어 보이는 자리
- Django의 block tag와 비슷한 역할
- App.vue 는 base.html 같은 역할
- router-view는 block 태그로 감싼 부분
4. src/Views
- router-view에 들어갈 component 작성
- 기존의 components vs views에 있는 components ⇒ 기능상 차이 x. 구분 위해!
- views : routing에 직접적으로 연결된 components
다른 컴포넌트와 구분 위해 파일명에 View로 끝나는 것을 권장
- 기존 components : 직접 연결 x components
- views : routing에 직접적으로 연결된 components
3. Vue Router 실습
1. 선언적 방식
2. 프로그래밍 방식
3. Dynamic Route Matching
- 동적 인자 전달
4. lazy-loading
- 첫 로딩에는 렌더링 하지 않는다.
- 특정 라우트에 방문할 때 ⇒ 로딩한다
- ⇒ 모든 파일을 한 번에 로드하지 않아도 되기 때문에 최초에 로드하는 시간이 빨라진다.
- 당장 사용하지 않을 컴포넌트는 먼저 로드하지 않는 것이 핵심이다.
Uploaded by N2T