Vue.js Router 라우터 구현 방법

1) 라우팅이란?

Vue.js에서 라우팅은 단일 페이지 애플리케이션(SPA) 내에서 서로 다른 컴포넌트들로 이동할 수 있도록 하는 기능입니다.

라우팅을 통해 사용자는 페이지를 새로고침하지 않고도 웹 애플리케이션 내에서 다른 뷰로 전환할 수 있습니다.

Vue.js에서는 이 기능을 제공하기 위해 vue-router 라이브러리를 사용합니다.

이 글에서는 Vue.js에서 라우터를 설정하고 사용하는 방법에 대해 설명하고자 합니다.

먼저, vue-router 패키지를 설치해야 합니다.

다음 명령어를 실행하여 설치할 수 있습니다:

>> npm install vue-router

라우터 설정 파일을 생성하고, 이 파일에서 각 경로에 대해 어떤 컴포넌트를 렌더링할지 정의합니다.

router.js 파일 생성 (필자는 index.js로 만듬)

소스예제1

이 파일에서는 createRouter와 createWebHistory 함수를 사용하여 라우터를 생성하고, 각 경로와 해당 컴포넌트를 정의합니다.

이제 main.js 파일에서 라우터를 애플리케이션에 추가합니다.

소스예제2

위 코드에서는 라우터를 포함하여 여러 플러그인들을 애플리케이션에 추가합니다.

app.use(router)를 통해 라우터를 사용하도록 설정합니다.

이제 라우터를 사용할 수 있도록 다른 컴포넌트에서 <router-view> 태그를 선언하면 호출되는 URL에 맞게 컴포넌트가 이동됩니다. 아래의 경우 /userinfo 정의 된 컴포넌트로 이동합니다.

위 설정이 완료되면, 라우터를 통해 페이지 간 이동이 가능합니다.

예를 들어, /menu01 경로로 이동하면 MenuCustom01 컴포넌트가 렌더링되고, /userInfo 경로로 이동하면 UserInfo 컴포넌트가 렌더링됩니다.

이는 SPA의 핵심 기능으로, 페이지 전체를 새로고침하지 않고도 컴포넌트 간 전환이 가능하게 합니다.

이렇게 설정하면, 네비게이션 메뉴를 통해 다양한 페이지로 이동할 수 있고, 각 페이지는 라우터에 의해 관리됩니다.

네스트된 라우터(nested routes)나 동적 라우터(dynamic routes) 등을 사용하여 애플리케이션을 더욱 유연하게 만들 수 있습니다.

페이지 이동이 잘 되는지 테스트 해보시고, 이해가 어려운 부분이 있다면 댓글 남겨주세요.

읽어주셔서 감사합니다. 😊