0songha0

Vue 문법 정리 4 / Vue Router URL 컴포넌트 매핑 방법

Vue 라우터란?

URL 경로에 따라 화면에 렌더링할 컴포넌트를 매핑할 수 있는 라우팅 라이브러리입니다.

Vue 프로젝트 라우터 적용 방법

Vue 라우터 라이브러리 설치

npm install vue-router

프로젝트 경로에서 위 명령어를 통해 Vue Router를 설치할 수 있습니다.

라우트 설정 (URL, 컴포넌트 매핑)

import { createRouter, createWebHistory } from 'vue-router';

import View컴포넌트명1 from '@/views/View컴포넌트명1.vue';
import View컴포넌트명2 from '@/views/View컴포넌트명2.vue';
import View컴포넌트명3 from '@/views/View컴포넌트명3.vue';
import View컴포넌트명4 from '@/views/View컴포넌트명4.vue';

const routes = [
  {
    path: '/',
    name: '페이지명1' // 필수값 X
    component: View컴포넌트명1
  },
  {
    path: '/URL경로',
    component: View컴포넌트명2
  },
  {
    path: '/URL경로/하위경로',
    component: View컴포넌트명3
  },
  {
    path: '/URL경로/:id', // 동적 세그먼트를 통한 동적 라우팅 (여러 URL을 하나의 컴포넌트에 매핑)
    component: View컴포넌트명4
  },
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // 기본값 : '/'
  routes, // 키와 값이 같으므로 단축 표현 사용
});

export default router;

src/router 폴더에 index.js 파일 생성 후, 위와 같이 라우터 객체를 생성하고 내보내면 됩니다.
createWebHistory 함수 파라미터 경로를 기준으로 라우터가 URL 히스토리를 관리합니다.

Vue 라우팅 기능 사용 설정

import router from '@/router';

createApp(App).use(router).mount('#app');

main.js 파일에 router import 후 라우터 객체 인스턴스를 Vue 앱에 등록하면 적용됩니다.
이제 ‘http://localhost:포트/URL경로’로 접근하면 매핑된 컴포넌트가 렌더링 됩니다.

Vue 라우터 사용법

RouterView 렌더링 방법

<template>
  <main>
    <div class="container">
      <RouterView></RouterView>
    </div>
  </main>
</template>

특정 컴포넌트 안에 RouterView 내장 컴포넌트를 위치시키면,
현재 URL 경로에 매핑된 컴포넌트가 RouterView 내부에 렌더링됩니다.

HTML에서 페이지 이동 방법

<template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/URL경로">페이지명</RouterLink>
  </nav>
</template>

일반 a 태그 대신 RouterLink 커스텀 컴포넌트를 사용하면,
전체 페이지 리로딩 없이 URL에 매핑된 페이지 컴포넌트를 렌더링할 수 있습니다.

RouterLink 활성화 시 클래스 지정

<template>
  <nav>
    <RouterLink active-class="active클래스명" to="/">Home</RouterLink>
    <RouterLink active-class="active클래스명" to="/URL경로">페이지명</RouterLink>
  </nav>
</template>

RouterLink는 기본적으로 a 태그로 렌더링됩니다.
위와 같이 RouterLink에 active-class를 지정하면, a태그가 클릭되어 활성화 시 클래스를 부여합니다.
Vue 3 이상은 active-class가 지원되지 않고, 활성화된 링크에 자동으로 붙는 router-link-active, router-link-exact-active 클래스에 스타일을 지정합니다.

Javascript에서 페이지 이동 방법

<template>
  <button @click="$router.push('/경로')">버튼명</button>
  또는
  <button @click="goOrderPage">버튼명</button>
</template>
<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const goOrderPage = () => {
  router.push('/경로');
}
</script>

Options API의 this.$router는 Composition API의 useRouter() 훅과 같은 기능을 합니다.
router.push()로 전체 페이지 리로딩 없이 페이지를 이동할 수 있습니다.

라우트 정보 접근 방법

<template>
  <p></p>
</template>
<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();

console.log(route.path); // 현재 URL 경로 객체
console.log(route.name); // 라우트에 설정된 페이지 이름 (없으면 undefined)
console.log(route.params); // URL로 받은 동적 세그먼트 파라미터 객체
console.log(route.query); // URL로 받은 쿼리스트링 파라미터 객체
console.log(route.query.파라미터키); // 특정 쿼리 파라미터 값 추출
console.log(route.hash); // URL로 받은 해시태그 파라미터 객체
</script>

Options API의 this.$route는 Composition API의 useRoute() 훅과 같은 기능을 합니다.
현재 활성화된 URL 경로, URL 파라미터 등 라우트 정보를 확인할 수 있습니다.

최신 글