Vue의 두 가지 라우팅 모드와 구현 원칙

Vue.js는 뛰어난 라우팅 관리 모듈을 통해 단일 페이지 애플리케이션(SPA) 개발을 가능하게 하는 인기 있는 프런트 엔드 프레임워크입니다. Vue 라우팅 관리 모듈(Vue Router)에는 기록 모드와 해시 모드의 두 가지 모드가 있습니다. 이번 글에서는 이 두 가지 모드가 어떻게 구현되고 Vue에서 어떻게 사용하는지 자세히 설명하겠습니다.

1. 라우팅 모드의 개념

기존 다중 페이지 애플리케이션 개발에서는 각 페이지에 고유한 URL 주소가 있으며 사용자는 다른 URL 주소에 액세스할 때 다른 페이지를 요청합니다. 단일 페이지 애플리케이션에서는 모든 페이지가 동일한 HTML 페이지에 표시됩니다. 사용자가 점프해도 페이지가 다시 로드되지는 않지만 JavaScript를 통해 페이지가 전환됩니다. 페이지 전환 과정에서 Vue 라우팅 관리 모듈이 중요한 역할을 합니다.

라우팅 모드는 전송 시 URL 주소가 사용되는 방식을 말합니다. 차이점에 따라 라우팅 모드는 해시 기반 라우팅 모드와 기록 기반 라우팅 모드의 두 가지 유형으로 나눌 수 있습니다.

2. 해시 모드

해시 모드는 Vue Router의 기본 라우팅 모드이며 구현 원리는 매우 간단합니다. 해시는 우리가 자주 볼 수 있는 앵커 포인트인 URL의 # 기호를 나타냅니다.

해시 모드에서는 URL의 # 기호 뒤에 페이지 경로가 옵니다(예: http://www.example.com/#/home, 여기서 /#/home은 페이지 경로입니다). 사용자가 페이지로 이동하면 Vue Router는 해시 부분을 변경하여 URL에 새 페이지의 경로를 표시하므로 페이지 전환이 실행되지 않고 라우팅 전환을 통해 새 페이지가 렌더링됩니다.

해시 모드를 사용하면 URL 중복을 피할 수 있다는 장점이 있습니다. 해시 부분이 서버로 전송되지 않고 프런트 엔드에서 페이지 전환만 수행되기 때문입니다. 그러나 이로 인해 검색 엔진의 SEO에 영향을 미치고 비표준 URL이 발생하는 등의 부작용도 발생합니다.

3. 기록 모드

기록 모드는 window.history.pushState API, window.history.replaceState API 및 popstate 이벤트를 사용하는 HTML5의 API를 사용합니다. 이 모드에서 Vue Router는 현재 페이지의 URL을 기록 스택에 추가하고 스택을 작동하여 경로 전환을 구현합니다. 사용자가 브라우저의 뒤로 버튼을 클릭하면 Vue Router는 이벤트 수신 메커니즘을 통해 popstate 이벤트를 수신하고 이전 URL 주소로 돌아갑니다. 다음은 샘플 코드입니다.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

여기서 기록 모드를 사용하기로 선택한 경우 서버 구성을 적절하게 설정해야 한다는 점에 유의해야 합니다. 이 모드에서는 액세스된 URL이 서버의 정적 리소스에 대한 경로가 아닌 경우 404 오류가 반환되기 때문입니다.

4. 라우팅 모드 전환

Vue Router를 사용하여 단일 페이지 애플리케이션을 개발할 때 다음 두 가지 방법을 통해 라우팅 모드를 전환할 수 있습니다.

1. 샘플 코드는 다음과 같습니다.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

2. 프로젝트 빌드 시 vue.config.js 파일에 HistoryApiFallback 속성을 설정하여 구현합니다. 다음은 샘플 코드입니다.

module.exports = {
  devServer: {
    historyApiFallback: true
  }
}

여기서 라우팅 모드 설정 시 라우팅 기능이 정상적으로 작동할 수 있는지 서버 환경에서 테스트 및 검증이 필요하다는 점에 유의하시기 바랍니다.

5. 요약

Vue Router는 단일 페이지 애플리케이션의 프런트 엔드 라우팅 관리를 실현할 수 있는 Vue.js의 중요한 부분입니다. URL 주소 전송 프로세스에 사용되는 방법에 따라 해시 모드와 기록 모드로 구분됩니다. 각각은 고유한 장점과 단점이 있으므로 개발자는 실제 필요에 따라 선택해야 합니다. 단일 페이지 애플리케이션 개발을 위해 Vue Router를 사용할 경우 라우팅 모드를 적절하게 설정하고 서버 환경에서 테스트 및 검증하여 라우팅 기능이 정상적으로 실행되는지 확인해야 합니다.

위 내용은 Vue의 두 가지 라우팅 모드와 구현 원칙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!