Vue : Router
- Routing
네트워크에서 경로를 선택하는 프로세스
→ 웹 애플리케이션에서 다른 페이지 간의 전환과 경로를 관리하는 기술
- RouterLink
페이지를 다시 로드하지 않고 URL을 변경하여 URL 생성 및 관련 로직을 처리한다.
HTML의 <a>태그를 렌더링 한다.
- RouterView
RouterLink URL에 해당하는 컴포넌트를 표시한다.
원하는 곳에 배치하여 컴포넌트를 레이아웃에 표시할 수 있다.
- router/index.js
라우팅과 관련된 정보와 설정이 작성되는 곳
router에 URL과 컴포넌트를 매핑한다.
- views
RouterView 위치에 렌더링할 컴포넌트가 있는 곳
기존 components 폴더와 기능적으로 다른 것은 없지만 분류의 의미로 따로 구성되어 있다.
컴포넌트 이름도 일반 컴포넌트와 구분하기 위해 이름을 View로 끝나도록 작성하는 것을 권장한다.
- Named Routes
경로에 이름을 지정하는 라우팅
name 속성 값에 경로에 대한 이름을 지정한다.
- Dynamic Route Matching
URL의 일부를 변수로 사용하여 경로를 동적으로 매칭
( 쟝고의 variable routing )
⇒ 매개변수를 사용한 동적 경로 매칭 :
주어진 패턴 경로를 동일한 컴포넌트에 매핑해야 하는 경우에 활용한다.
매개변수는 객체의 params 속성의 객체 타입으로 전달한다.
객체의 key 이름과 index.js 에서 지정한 매개변수 이름은 같아야 한다.
- Nested Routes = 중첩된 라우팅
단, 중첩된 라우팅은 컴포넌트 간 부모-자식 관계가 아니라 URL에서의 중첩된 관계를 표현하는 관점으로 바라본다.
- children 옵션 : 배열 형태로 필요한 만큼 중첩 관계를 표현한다.
- Programmatic Navigation
RouterLink 대신 자바 스크립트를 사용하여 페이지를 이동하는 것
프로그래밍으로 URL 이동을 구현, router 의 인스턴스 메서드를 사용한다.
- router.push () = 다른 위치로 이동하기
다른 URL로 이동하는 메서드
새 항목을 history stack에 push하므로 사용자가 뒤로 가기 버튼을 클릭하면 이전 URL로 이동할 수 있다.
RouterLink를 클릭했을 때 내부적으로 호출되는 메서드다.
- router.replace () = 현재 위치 바꾸기
push 메서드와 달리 history stack에 새로운 항목을 push 하지 않고 다른 URL로 이동한다.
따라서 이동 전 URL로 뒤로 가기가 불가능하다.
- Navigation Guard
Vue router를 통해 특정 URL에 접근할 때 다른 URL로 redirect를 하거나 취소하여 내비게이션을 보호한다. ⇒ 라우트 전환 전후에 자동으로 실행되는 Hook
1. Globally Guard
애플리케이션 전역에서 모든 라우트 전환에 적용되는 가드
index.js 에서 작성한다.
ex) router.beforeEach() : 다른 URL로 이동하기 직전에 실행되는 함수
2. Per-route Guard
특정 라우터에만 동작하는 가드
index.js 의 각 routes 에서 작성한다.
ex) router.beforeEnter() : 특정 route에 진입했을 때 실행되는 함수
→ 단순히 URL의 매개변수나 쿼리 값이 변경될 때는 실행되지 않고, 다른 URL에서 탐색해 올 때만 실행된다.
3. In-component Guard
특정 컴포넌트 내에서만 적용되는 가드
각 컴포넌트의 script 에서 작성한다.
ex)
onBeforeRouteLeave() : 현재 라우트에서 다른 라우트로 이동하기 전에 실행
onBeforeRouteUpdate() : 이미 렌더링 된 컴포넌트가 같은 라우트 내에서 업데이트 되기 전에 실행
- Lazy Loading Routes
Vue 애플리케이션 첫 빌드 시 해당 컴포넌트를 로드하지 않고, 해당 경로를 처음으로 방문할 때 컴포넌트를 로드하는 것을 말한다.
→ 앱을 빌드할 때 처음부터 모든 컴포넌트를 준비하면 컴포넌트의 크기에 따라 페이지 로드 시간이 길어질 수 있기 때문