Vue 라우터를 사용하여 Vue에서 라우팅을 처리하는 방법

Vue 라우터: 싱글 페이지 애플리케이션 구축의 핵심

Vue.js 생태계의 핵심인 Vue 라우터는 싱글 페이지 애플리케이션(SPA) 개발에 필수적인 도구입니다. 이 강력한 라우팅 라이브러리를 사용하면 웹 애플리케이션의 다양한 컴포넌트를 특정 URL 경로에 연결하고, 탐색 기록을 관리하며, 복잡한 라우팅 설정을 손쉽게 처리할 수 있습니다.

Vue 라우터 시작하기

Vue 라우터 설치는 간단합니다. 먼저, 선호하는 디렉토리에서 다음 npm 명령을 실행하여 새로운 Vue 프로젝트를 생성합니다.

 npm create vue

프로젝트 생성 과정에서 싱글 페이지 애플리케이션 개발을 위한 Vue 라우터 추가 여부를 묻는 메시지가 표시되면 '예'를 선택합니다.

다음으로, 코드 편집기에서 프로젝트를 열면 `src` 디렉토리 내에 `router` 폴더가 생성된 것을 확인할 수 있습니다.

`router` 폴더 안의 `index.js` 파일은 애플리케이션의 경로를 관리하는 핵심 로직을 포함합니다. 이 파일에서는 `vue-router` 패키지로부터 `createRouter`와 `createWebHistory` 함수를 가져옵니다.

`createRouter` 함수는 주어진 설정 객체를 기반으로 새로운 라우터 인스턴스를 생성합니다. 이 객체에는 `history`와 `routes` 속성이 포함됩니다. 특히 `routes` 속성은 각 경로의 구성 정보를 담은 객체 배열입니다.

경로 설정을 완료한 후, 이 라우터 인스턴스를 `export`하고, `main.js` 파일에서 `import`하여 사용해야 합니다.

 import './assets/main.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 const app = createApp(App)
 app.use(router)
 app.mount('#app')

위 코드에서 볼 수 있듯이, 라우터 기능을 `main.js` 파일로 가져와서 Vue 애플리케이션의 `use` 메서드를 통해 라우터 설정을 적용합니다.

이제 다음 예시 코드와 같이 구성 요소를 수정하여 Vue 앱에 라우팅을 활성화할 수 있습니다.

 <script setup>
 import { RouterLink, RouterView } from 'vue-router'
 </script>
 <template>
   <header>
     <nav>
       <RouterLink to="https://www.makeuseof.com/">Home</RouterLink>
       <RouterLink to="/about">About</RouterLink>
     </nav>
   </header>
   <RouterView />
 </template>

위 코드는 Vue 컴포넌트 내에서 Vue 라우터를 사용하는 방법을 보여줍니다. `vue-router` 라이브러리에서 `RouterLink`와 `RouterView`라는 두 가지 컴포넌트를 가져옵니다.

`RouterLink` 컴포넌트는 위 코드에서 홈 페이지와 About 페이지로 이동하는 링크를 생성합니다. `to` 속성은 해당 링크를 클릭했을 때 이동할 경로를 지정합니다. 여기서 루트 경로(`/`)를 가리키는 링크와 `/about` 경로를 가리키는 다른 링크가 있습니다.

`RouterView` 컴포넌트는 현재 경로에 해당하는 컴포넌트를 렌더링하는 역할을 합니다. 쉽게 말해, 현재 URL에 따라 동적으로 콘텐츠를 표시할 수 있는 영역을 제공합니다. 사용자가 다른 경로로 이동하면 해당 경로와 연결된 컴포넌트가 `RouterView` 내부에 렌더링됩니다.

애플리케이션 경로에 파라미터 추가하기

Vue 라우터는 경로에 파라미터 및 쿼리를 추가하는 기능을 지원합니다. 파라미터는 URL의 동적인 부분을 나타내며, 콜론 (`:`)으로 표시됩니다.

애플리케이션의 경로에서 파라미터를 캡처하도록 Vue 라우터를 설정하려면 `index.js` 파일에서 특정 경로를 구성해야 합니다.

 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: "https://www.makeuseof.com/",
       name: "home",
       component: HomeView,
     },
     {
       path: "/developer/:profileNumber",
       name: "developer",
       component: () => import("../views/devView.vue"),
     },
   ],
 });

위 코드 블록은 홈과 개발자라는 두 개의 경로가 있는 라우터 인스턴스를 보여줍니다. 개발자 경로는 개발자의 프로필 번호를 기반으로 특정 개발자에 대한 정보를 표시합니다.

이제 다음 코드 조각처럼 보이도록 `App.vue` 파일을 수정합니다.

 <script setup>
 import { ref } from "vue";
 import { RouterLink, RouterView } from "vue-router";
 const developer = ref([
   {
     name: "Chinedu",
     profile: 2110,
   },
 ]);
 </script>
 <template>
   <header>
     <nav>
       <RouterLink to="https://www.makeuseof.com/">Home</RouterLink>
       <RouterLink :to="{ path: `/developer/${developer.profile}` }">
        Dev Profile
      </RouterLink>
     </nav>
   </header>
   <RouterView />
 </template>

위의 코드에서 `developer` 변수는 이름과 프로필이라는 두 가지 속성을 가진 반응형 객체로 설정되었습니다. 그런 다음 두 번째 `RouterLink` 컴포넌트는 `devView` 컴포넌트로 연결됩니다. 이제 `devView` 컴포넌트의 템플릿 또는 JavaScript 블록에서 URL로 전달된 파라미터 값에 접근할 수 있습니다.

Vue는 `devView` 컴포넌트 템플릿 블록에서 파라미터 값에 접근하기 위해 `$route` 메소드를 제공합니다. 이 메소드는 URL 정보를 상세히 담고 있는 객체를 반환하며, 그 정보에는 `fullPath`, `query`, `params`, 그리고 컴포넌트 등이 포함됩니다.

다음은 `$route` 메소드를 사용하여 `devView` 컴포넌트 내에서 특정 개발자 프로필에 접근하는 방법의 예시입니다.

 <template>
   <div>
     <h1>This is developer {{ $route.params.profileNumber }} about page</h1>
   </div>
 </template>

위 코드는 컴포넌트 템플릿 내에서 `$route` 메소드를 사용하여 `profileNumber` 파라미터 값에 접근하고 이를 화면에 표시하는 방법을 보여줍니다.

`$route` 메소드의 `params` 속성은 경로에서 정의한 파라미터를 보관합니다. Vue는 이 컴포넌트를 렌더링할 때 `$route.params.profileNumber` 값을 실제 URL에 전달된 값으로 대체합니다.

예를 들어, `/developer/123`에 방문하면 화면에는 “페이지에 대한 개발자 123입니다”라는 메시지가 표시됩니다.

또한, 컴포넌트의 JavaScript 블록에서 경로 정보에 접근할 수도 있습니다. 예를 들면 다음과 같습니다.

 <script setup>
 import { useRoute } from "vue-router";
 const route = useRoute();
 </script>
 <template>
   <div>
     <h1>This is developer {{ route.params.profileNumber }} about page</h1>
   </div>
 </template>

이전 코드 블록에서는 `$route` 객체에 직접 접근하여 경로 파라미터를 검색했지만, 여기서는 `vue-router` 패키지에서 `useRoute()` 함수를 가져와서 사용했습니다. Vue 컴포넌트 템플릿에서 사용된 변수에 이 함수를 할당했습니다.

`useRoute()`를 사용하면 Vue 3의 Composition API 방식을 따르며, 반응형 시스템을 활용할 수 있습니다. 이를 통해 경로 파라미터가 변경될 때 컴포넌트가 자동으로 업데이트됩니다.

애플리케이션 경로에 쿼리 추가하기

쿼리 또는 쿼리 문자열은 URL에 추가되는 선택적 매개변수이며, 물음표(`?`) 다음에 위치합니다. 예를 들어, `/search?name=vue` 경로에서 `name=vue`는 `name`이 키이고 `vue`가 값인 쿼리 문자열입니다.

Vue 라우터의 경로에 쿼리를 추가하려면 `RouterLink` 컴포넌트의 `to` 객체에서 `query` 속성을 사용할 수 있습니다. `query` 속성은 각 키-값 쌍이 쿼리 매개변수를 나타내는 객체여야 합니다. 예를 들어 다음과 같습니다.

 <RouterLink :to="{ name: 'home', query: {name: 'vue'}}">Home</RouterLink>

경로에 쿼리를 추가한 후, Vue 컴포넌트에서 쿼리 파라미터에 접근할 수 있습니다. 경로 파라미터를 추가하는 것과 유사하게, `$route` 객체나 `useRoute` 함수를 사용하여 접근할 수 있습니다.

다음은 컴포넌트에서 쿼리 파라미터를 사용하는 방법의 예시입니다.

 <template>
   {{ $route.query.name }}
 </template>

위 코드는 Vue.js 컴포넌트 템플릿 내에서 `$route.query` 객체를 사용하여 URL에서 쿼리 파라미터(`name`) 값에 접근하여 렌더링하는 방법을 보여줍니다.

폴백 (404) 페이지 정의하기

Vue 라우터를 사용하면 주어진 URL과 일치하는 다른 경로가 없을 때 매칭되는 폴백 경로를 정의할 수 있습니다. 이는 "404 찾을 수 없음" 페이지를 표시하는 데 유용합니다.

Vue 라우터에서 폴백 경로를 정의하는 방법은 다음과 같습니다.

     {
       path:'/:pathName(.*)',
       name: 'NotFound',
       component: () => import('../views/NotFoundView.vue')
     }

`/:pathName` 부분은 URL의 동적 세그먼트를 나타내며, `(.*)`는 동적 세그먼트 뒤의 모든 문자를 매칭하는 JavaScript 정규 표현식입니다. 이렇게 하면 경로가 어떤 URL과도 매칭될 수 있습니다.

사용자가 다른 경로와 일치하지 않는 URL로 이동하면 Vue는 `NotFoundView` 컴포넌트를 렌더링합니다. 이 방법을 사용하면 404 오류를 처리하거나, 요청된 경로를 찾을 수 없을 때 대체 페이지를 표시할 수 있습니다.

Vue에서 애니메이션 만들기

지금까지 애플리케이션 경로에 파라미터와 쿼리를 추가하는 방법과 404 오류를 처리하기 위한 폴백 페이지를 정의하는 방법을 살펴보았습니다. Vue 라우터는 동적 및 중첩 경로 설정과 같은 더욱 다양한 기능을 제공합니다.

웹 페이지 요소에 애니메이션과 전환 효과를 추가하면 사용자 경험을 크게 향상시킬 수 있습니다. Vue에서 전환과 애니메이션을 만드는 방법을 학습하여 더 부드럽고 매력적이며 전반적으로 개선된 웹 사이트를 개발할 수 있습니다.