[콜럼Vue스] 라우트 정보를 속성으로 연결하기

Vue Router에서 라우트 정보를 속성으로 연결하는 방법은 <router-link> 컴포넌트나 <router-view>를 통해서 컴포넌트 간에 라우트 관련 정보를 주고받는 방식으로 이루어짐. 특히 동적 라우팅이나 라우트 매칭 정보를 컴포넌트에서 사용하고자 할 때, 이러한 방법을 자주 사용함.

요약

• props 옵션을 사용하여 라우트 파라미터나 쿼리를 컴포넌트에 전달할 수 있음.
• **<router-link>**를 통해 라우트 경로에 동적 값을 전달하여 링크를 생성 가능.
• $route 객체로 라우트 정보를 직접 접근할 수도 있지만, props로 전달하는 것이 더 구조적으로 깔끔하고 권장됨.

---

1. 라우트 정보를 속성으로 연결하기

Vue Router를 사용할 때 라우트 정보를 컴포넌트에 전달하고, 해당 정보를 props를 통해 연결하여 컴포넌트 내부에서 처리할 수 있음.

1.1. props를 통해 라우트 정보 전달

Vue Router는 각 라우트 정의에서 props 옵션을 사용할 수 있음. 이를 통해 라우트 매칭 정보(파라미터, 쿼리 등)를 props로 해당 컴포넌트에 전달할 수 있음.

 

import { createRouter, createWebHistory } from 'vue-router';
import UserProfile from '@/components/UserProfile.vue';

const routes = [
  {
    path: '/user/:id',              // 동적 파라미터 :id
    name: 'UserProfile',
    component: UserProfile,
    props: true                     // 라우트 매칭 정보(props)로 전달
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

위 코드에서, :id는 동적 파라미터로, 라우트 매칭 시 해당 파라미터가 props로 UserProfile 컴포넌트에 전달됨.

 

1.2. 컴포넌트에서 props로 라우트 정보 받기

이제 UserProfile 컴포넌트에서는 props를 통해 라우트 정보(id)를 받아 처리할 수 있음.

<!-- UserProfile.vue -->
<template>
  <div>
    <h1>User ID: {{ id }}</h1>
  </div>
</template>

<script>
export default {
  props: ['id'],  // props로 라우트 파라미터 id를 받음
}
</script>

이렇게 하면, '/user/:id' 경로로 접근할 때 id 값이 props로 전달되어 화면에 표시됨.

 

2. 동적 라우팅과 라우트 속성 연결

동적 라우트는 라우트 경로에 변수를 포함하여 유연하게 처리할 수 있음. 이때 라우트 파라미터를 props로 컴포넌트에 전달하면, 컴포넌트 내에서 쉽게 접근할 수 있음.

// router/index.js
{
  path: '/product/:productId',
  component: ProductDetails,
  props: (route) => ({ productId: route.params.productId })  // props로 동적 파라미터 전달
}

위의 예시는 동적 라우트 파라미터인 :productId를 props로 전달하여 ProductDetails 컴포넌트에서 사용할 수 있도록 설정한 것임.

 

3. <router-link>로 라우트 속성 연결

<router-link> 컴포넌트를 사용할 때도 to 속성에 라우트 정보를 동적으로 전달하여 처리할 수 있음.

<template>
  <router-link :to="{ name: 'UserProfile', params: { id: 123 } }">
    Go to User 123
  </router-link>
</template>

위 코드에서, id: 123을 라우트 파라미터로 전달하여 UserProfile 컴포넌트로 이동할 때 id를 props로 전달하게 됨.

4. $route 객체로 라우트 정보 접근하기

props를 사용하는 대신, 컴포넌트 내부에서 $route 객체를 통해 라우트 정보를 직접 접근할 수도 있음

<template>
  <div>
    <h1>User ID: {{ $route.params.id }}</h1>
  </div>
</template>

$route 객체를 사용하면, 파라미터, 쿼리, 경로 정보 등 현재 라우트에 대한 모든 정보를 접근할 수 있음.