Vue 학습

8장. 라우팅

이 작품은 AI를 사용하여 번역되었습니다. 여러분의 피드백과 의견을 환영합니다: [e-mail]

이전 챕터에서는 Vue 컴포넌트의 기본 사항과 Vue 컴포넌트를 작성하는 다양한 접근 방식을 배웠습니다. 컴포지션 API를 사용하여 재사용 가능한 컴포넌트 로직을 독립형 컴포지션으로 만드는 과정을 진행했습니다. 또한 렌더링 및 사용자 정의 플러그인 생성의 고급 개념에 대해서도 배웠습니다.

이 장에서는 Vue 애플리케이션 구축의 또 다른 측면인 라우팅을 살펴보고, Vue 애플리케이션의 공식 라우팅 관리 라이브러리인 라우터와 그 핵심 API를 사용하여 라우팅 시스템의 개념을 소개합니다. 그런 다음 라우터 가드를 사용하여 앱의 경로를 구성하고, 애플리케이션 경로 간에 데이터를 전달 및 처리하고, 애플리케이션에 대한 동적 및 중첩 경로를 구축하는 방법을 배웁니다.

라우팅이란 무엇인가요?

사용자는 웹을 탐색할 때 브라우저의 주소 표시줄에 URL(Uniform Resource Locator)을 입력합니다. URL은 웹 내 리소스의 주소입니다. 여기에는 많은 부분이 포함되어 있으며, 다음과 같이 중요한 섹션으로 나눌 수 있습니다(그림 8-1):

위치

프로토콜, 애플리케이션의 도메인 이름(또는 웹 서버의 IP 주소), 요청된 리소스에 액세스하는 데 사용되는 포트 를 포함합니다.

경로

요청된 리소스의 경로입니다. 웹 개발에서는 미리 정의된 경로 패턴 을 기반으로 브라우저 측에서 렌더링할 페이지 컴포넌트를 결정하는 데 이 경로를 사용합니다.

쿼리 매개변수

& 기호로 구분된 서버에 추가 정보를 전달하기 위한 키-값 쌍의 집합입니다. 주로 페이지 간에 데이터를 전달하기 위해 쿼리 매개변수를 사용합니다.

앵커

# 기호 뒤의 모든 텍스트. 앵커를 사용하여 같은 페이지의 특정 요소로 이동할 수 있으며, 종종 일치하는 아이디와 일치하는 id 값 또는 미디어 요소의 타임랩스()를 사용합니다.

그림 8-1. URL 구조

사용자로부터 URL을 수신하면 브라우저는 수신된 URL을 기반으로 서버와 통신하여 요청된 리소스가 있는 경우 이를 반환합니다. 리소스는 이미지나 동영상과 같은 정적 파일 또는 웹 페이지나 웹 애플리케이션과 같은 동적 페이지일 수 있습니다.

단일 페이지 애플리케이션(SPA)에서는 라우팅 메커니즘을 브라우저 측에서 대신 수행하므로 브라우저를 새로고침하지 않고도 원활한 페이지 탐색이 가능합니다. URL은 페이지의 주소이므로 라우팅 시스템을 사용하여 경로 패턴을 애플리케이션에서 이를 나타내는 특정 컴포넌트에 연결합니다 .

Vue와 같은 프론트엔드 프레임워크는 SPA의 구성 요소를 구축하기 위한 레이아웃을 제공하지만 라우팅 서비스는 제공하지 않습니다. 완벽한 사용자 탐색 환경을 만들려면 기록 유지 및 북마크와 같은 ...