Vue Router

Routing

: 네트워크에서 경로를 선택하는 프로세스

웹 서비스에서의 라우팅 ? => 유저가 방문한 URL에 대해 적절한 결과를 응답하는 것

Routing in SSR	- Server가 모든 라우팅을 통제 - URL로 요청이 들어오면 응답으로 완성된 HTML 제공 => 결론적으로, Routing에 대한 결정권을 서버가 가짐
Routing in SPA/CSR	- 서버는 하나의 HTML만을 제공 - 이후에 모든 동작은 하나의 HTML 문서 위에서 Javascript 코드를 활용 => 즉, 하나의 URL만 가질 수 있음

Routing 이 없다면,

유저가 URL을 통한 페이지의 변화를 감지할 수 X
페이지가 무엇을 렌더링 중인지에 대한 상태를 알 수 X
(새로고침하면 처음 페이지로, 링크를 공유하면 처음페이지만 공유 가능)
브라우저의 뒤로 가기 기능을 사용할 수 X

Vue Router

: Vue의 공식 라우터

SPA 상에서 라우팅을 쉽게 개발할 수 있는 기능 제공
라우트에 컴포넌트를 매핑한 후, 어떤 URL에서 렌더링 할지 알려줌

=> 즉 , SPA를 URL을 이동하면서 사용 가능, SPA의 단점 중 하나인 "URL이 변경되지 않는다"를 해결

Vue Router 시작하기

1. 설치 및 반영

$ vue create (프로젝트 명)  // vue 프로젝트 생성

$ cd (프로젝트 명)          // 디렉토리 이동

$ vue add router             // Vue CLI를 통해 router plugin 적용

/*
기존에 프로젝트를 진행하고 있던 도중에 router를 추가하게 되면 App.vue를 덮어쓰므로
필요한 경우에는 명령 실행 전에 파일을 백업해두어야 함
*/

2. History mode 사용 여부

브라우저의 History API를 활용한 방식 => 새로고침 없이 URL 이동 기록을 남길 수 있음
우리에게 익숙한 URL 구조로 사용 가능 => ex) http://localhost:8080/index

[참고]

history mode를 사용하지 않으면 Default 값인 hash mode로 설정됨 ('#' 을 통해 URL을 구분하는 방식)

ex) http://localhost:8080#index

3 . App.vue - router-link 요소 및 router-view가 추가됨

4. router/index.js 와 views 폴더가 생성됨

5. 서버 실행하기

router-link

a 태그와 비슷한 기능 -> URL을 이동시킴

routes에 등록된 컴포넌트와 매핑됨
히스토리 모드에서 router-link는 클릭 이벤트를 차단하여 a 태그와 달리 브라우저가 페이지를 다시 로드하지 않도록 함

목표 경로는 'to' 속성으로 지정됨

기능에 맞게 HTML에서 a 태그로 rendering 되지만, 필요에 따라 다른 태그로 바꿀 수 있음

router-view

주어진 URL에 대해 일치하는 컴포넌트를 렌더링 하는 컴포넌트
실제 component가 DOM에 부착되어 보이는 자리를 의미
router-link를 클릭하면 routes에 매핑된 컴포넌트를 렌더링

src/router/index.js

: URL로 라우터 링크가 이동했을때 어떤 컴포넌트를 보여줄지 작성

라우터에 관련된 정보 및 설정이 작성되는 곳
Django의 urls.py에 해당
routes에 URL와 컴포넌트를 매핑

src/Views

router-view에 들어갈 component 작성
기존에 컴포넌트를 작성하던 곳은 components, views 두 폴더로 나뉘어짐
각 폴더 안의 .vue 파일들이 기능적으로 다른 것은 아님 (단지, 분리를 위함)

[권장사항]

views/	- routes에 매핑되는 컴포넌트 즉, <router-view>의 위치에 렌더링 되는 컴포넌트를 모아두는 폴더 - 다른 컴포넌트와 구분하기 위해 View 로 끝나도록 만드는 것을 권장
components/	- routes에 매핑된 컴포넌트의 하위 컴포넌트를 모아두는 폴더