[javascript] Vue Router와 브라우저 히스토리 스택

18 Dec 2023

Vue.js는 Vue Router를 사용하여 싱글 페이지 애플리케이션(SPA)을 개발하는 데 도움을 줍니다. Vue Router를 사용하면 라우팅을 통해 다른 페이지로 이동하고 브라우저의 히스토리 스택을 관리할 수 있습니다.

Vue Router

Vue Router는 Vue 애플리케이션에서 클라이언트 사이드 라우팅을 구현하기 위한 공식 라우팅 라이브러리입니다. 기본적으로 URL을 기반으로 한 페이지 이동 및 엔드포인트 라우팅을 처리합니다.

Vue Router를 사용하면 뷰 컴포넌트 간의 이동 및 네비게이션을 쉽게 처리할 수 있습니다. 또한 애플리케이션의 URL을 변경하면 적절한 컴포넌트를 렌더링하여 SPA의 경험을 제공합니다.

브라우저 히스토리 스택은 사용자가 방문한 웹 페이지의 기록을 저장하는 메커니즘입니다. 사용자가 뒤로가기 또는 앞으로가기 버튼을 클릭하거나 URL을 변경할 때 브라우저는 히스토리 스택을 참조하여 이전 상태로 돌아갈 수 있도록 합니다.

Vue Router는 브라우저의 히스토리 스택을 직접적으로 조작하여 뒤로가기, 앞으로가기와 같은 브라우저의 내장 기능을 Vue 컴포넌트에서 쉽게 다룰 수 있습니다.

// 이전 페이지로 이동
this.$router.go(-1);

// 다음 페이지로 이동
this.$router.go(1);

this.$router.go() 메서드를 사용하여 브라우저의 히스토리 스택을 조작할 수 있습니다.

Vue Router를 이용하여 SPA를 개발하면서, 네비게이션과 브라우저의 히스토리 스택을 효율적으로 관리할 수 있습니다.

이상으로 Vue Router와 브라우저 히스토리 스택에 대한 간략한 내용을 정리해보았습니다.

Vue Router 공식 문서를 참고하면 보다 자세한 정보를 얻을 수 있습니다.